Swipe Image with button and fingers - android

I'm trying to do a custom gallery with images shown in fullscreen mode and be able to swipe between different images with Previous Next buttons and with fingers.So for now I did the part with changing images with fingers,but I had to redesign my xml file and the whole structure and logic of my code and I need a little help or suggestions of how to add the new stuff.So the old code which I was using to swipe images with fingers was like this :
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);
HorizontalPager realViewSwitcher = new HorizontalPager(getApplicationContext());
ImageView img1 = new ImageView(getApplicationContext());
ImageView img2 = new ImageView(getApplicationContext());
ImageView img3 = new ImageView(getApplicationContext());
ImageView img4 = new ImageView(getApplicationContext());
ImageView img5 = new ImageView(getApplicationContext());
ImageView img6 = new ImageView(getApplicationContext());
img1.setImageResource(R.drawable.one);
img2.setImageResource(R.drawable.two);
img3.setImageResource(R.drawable.three);
img4.setImageResource(R.drawable.four);
img5.setImageResource(R.drawable.five);
img6.setImageResource(R.drawable.six);
realViewSwitcher.addView(img1);
realViewSwitcher.addView(img2);
realViewSwitcher.addView(img3);
realViewSwitcher.addView(img4);
realViewSwitcher.addView(img5);
realViewSwitcher.addView(img6);
setContentView(realViewSwitcher);
And this code shows the image in fullscreen mode and I can swipe between them.Now I need to do something like this :
I want to be able to swipe images with buttons and finger.And my second question is how can I hide the bar in top (Back,Galler,Info) and the bar in bottom (Previous,Next) and show the image in Fullscreen mode and still be able to swipe images only with fingers.
Here is how my xml file looks :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/single_card"
android:src="#drawable/one"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<RelativeLayout
android:id="#+id/actionbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:orientation="horizontal"
android:layout_gravity="center"
android:padding="10dp"
android:layout_alignParentTop="true" >
<Button
android:id="#+id/back_button"
android:text="Back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:background="#333333"
android:layout_centerVertical="true"
android:textSize="13dp"
android:textColor="#ffffff"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="5dp"
android:paddingBottom="5dp" />
<TextView
android:text="Gallery"
android:textStyle="bold"
android:textSize="15dp"
android:textColor="#FFFFFF"
android:id="#+id/single_msg_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"/>
<Button
android:id="#+id/info_button"
android:text="Info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#333333"
android:layout_centerVertical="true"
android:textSize="13dp"
android:textColor="#ffffff"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="5dp"
android:paddingBottom="5dp" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/content"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="#000000" >
<Button
android:id="#+id/previous_button"
android:text="Previous"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#333333"
android:layout_alignParentLeft="true"
android:textSize="13dp"
android:textColor="#ffffff"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:layout_marginLeft="50dp"
android:layout_marginBottom="10dp"
android:layout_alignParentBottom="true" />
<Button
android:id="#+id/next_button"
android:text="Next"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#333333"
android:layout_alignParentRight="true"
android:textSize="13dp"
android:textColor="#ffffff"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:layout_marginRight="50dp"
android:layout_marginBottom="10dp"
android:layout_alignParentBottom="true" />
</RelativeLayout>
</RelativeLayout>
Thanks in advance!!! Any help,suggestions or links with example are welcomed!

Use the view Flow project to do this. your code with adding imageViews is not a good solution at all.
see viewFlow on gitHub. there are examples with images also. all you do is add this layout in the activity, make an image adapter and thats it.

I did something like this a while back, basically a finger swipe left or finger swipe right perform 2 different actions and there are buttons for the same actions that can be clicked.
In my Main Activity I register the finger swipe listener:
gestureDetector = new GestureDetector(new ListItemGestureDetector(this));
gestureListener = new View.OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
if (gestureDetector.onTouchEvent(event)) {
return true;
}
return false;
}
};
Then in my Efficient Adapter that renders my list view, I register the buttons and their click (this would not be the same for you but when adding the buttons to my layout I do this (call and sms being buttons in my layout)
static class ViewHolder {
TextView name, phone;
ImageButton call, sms, other;
//ImageView icon;
}
ViewHolder holder = new ViewHolder();
holder.call.setClickable(true);
holder.call.setFocusable(true);
holder.call.setTag("call");
final int pos = position;
holder.call.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
Toast.makeText(context, "CALL", Toast.LENGTH_SHORT).show();
Cursor c = (Cursor) getItem(pos);
Intent i = new Intent(Intent.ACTION_CALL);
String phoneNumber = c.getString(WaddleAddressBook.DATA_ID);
i.setData(Uri.withAppendedPath(ContactsContract.CommonDataKinds.Phone.CONTENT_URI, phoneNumber));
context.startActivity(i);
}
});

For Swiping images we can simply use ViewPager concept.
1.set the viewpager in your layout
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</RelativeLayout>
2.MyMain.java
public class MyMain extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
ImagePagerAdapter adapter = new ImagePagerAdapter();
viewPager.setAdapter(adapter);
}
private class ImagePagerAdapter extends PagerAdapter {
private int[] mImages = new int[] {
R.drawable.one,
R.drawable.two,
R.drawable.hree,
R.drawable.four
};
#Override
public int getCount() {
return mImages.length;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == ((ImageView) object);
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
Context context = MyMain.this;
ImageView imageView = new ImageView(context);
int padding =context.getResources().
getDimensionPixelSize(R.dimen.padding_medium);
imageView.setPadding(padding, padding, padding, padding);
imageView.setScaleType(ImageView.ScaleType.CENTER);
imageView.setImageResource(mImages[position]);
((ViewPager) container).addView(imageView, 0);
return imageView;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
((ViewPager) container).removeView((ImageView) object);
}
}
}

Related

ListView - Start activity if clicked on ImageView

My ListView gets filles by this
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="70dp"
android:layout_height="70dp"
android:id="#+id/projectImage"
android:maxHeight="70dp"
android:maxWidth="70dp"
android:adjustViewBounds="true"
android:minHeight="50dp"
android:minWidth="50dp"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="90dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/projectTitle"
android:textStyle="bold"
android:focusable="false"
android:clickable="false"
android:textSize="15dp"
android:text="projecttitle" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:id="#+id/projectTopic"
android:focusable="false"
android:clickable="false"
android:textSize="14sp"
android:text="projectTopic"
android:layout_marginTop="3dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:id="#+id/projectdeadline"
android:textSize="14sp"
android:text="projectdeadline"
android:layout_marginTop="3dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="projectTaskCount"
android:id="#+id/projectTaskCount"
android:layout_marginTop="3dp" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</LinearLayout>
It contains one ImageView and three TextViews.
If I click on the ImageView I want to start my Activity Example1, else open next Activity WiFi.
#Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
Intent in = new Intent(this, WiFi.class);
in.putExtra("projectFileNamesMap", projectFileNamesMap.get(position));
in.putExtra("position", position);
in.putExtra("sessionId", sessionId);
startActivity(in);
}
How can I solve my Problem?
Summarized:
If I click on ImageView open Example1 Activity.
If elsewhere clicked, then open WiFi Activity.
Hope everybody can understand this.
Kind Regards!
use image.setOnclickListener and view.setOnItemCLickListener inside getView method to perform click on image view and whole view.
First set your image:
android:clickable="true" //setOnClickListener makes a view clickable if it doesn't have that as a default but use it anyway.
then:
imgView.setOnClickListener(new View.OnClickListener() {
//#Override
public void onClick(View v) {
Log.v(TAG, " click");
}
});
pls tell me if this works
Write OnClickListener for ImageView when creating a new Instance for each ImageView elements for the listView in the Adapter's getView method
Also make sure before you addView's to the Linearlayout you set appropriate LayoutParams.
public View getView(final int position, View convertView, ViewGroup parent) {
TextView txtOne, txtTwo, txtThree;
ImageView iv;
LinearLayout layout;
if(convertView == null){
layout = new LinearLayout(context);
txtOne = new TextView(context);
txtTwo = new TextView(context);
txtThree = new TextView(context);
iv = new ImageView(context);
} else{
layout = (LinearLayout) convertView;
txtOne = (TextView) layout.getChildAt(0);
txtTwo = (TextView) layout.getChildAt(0);
txtThree = (TextView) layout.getChildAt(0);
iv = (ImageView) layout.getChildAt(0);
}
layout.addView(txtOne);
layout.addView(txtTwo);
layout.addView(txtThree);
layout.addView(iv);
iv.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
//Do your handling here
}
});
}

How to use OnTouchListener to connect 2 or more ImageButtons

I want to connect imagebuttons to create a word on the textview. How can I do this?
The idea of using OnTouchListener is that i think its more "accurate" in my app. Heres the sample image of my app.
Please help me solve this problem. I am new in android programming. I saw some codes using Motion Event and has cases ACTION_DOWN and ACTION_UP but I cant understand how it is used.
Any help with codes will be highly appreciated.
here's my code:
public class MainActivity extends Activity {
//VARIABLES HERE
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//R.ID.XML ..
//randomize image display
// DISPLAY TEXT IN TV from IMGBTN
OnClickListener myCommoClickListner = new OnClickListener(){
#Override
public void onClick(View arg0) {
Log.i(TAG,"arg0.getId() = " + arg0.getId());
if(arg0.getId()==R.drawable.a){
Log.i(TAG,"arg0.getId()="+arg0.getId());
generatedString=generatedString+"a"; //[PLACEE RESPACTIVE CHARACTEER HERE]
text.setText(generatedString);
((ImageButton) arg0).setImageResource(R.drawable.changea);
if (!timeHasStarted) {
countDownTimer.start();
timeHasStarted = true;
}
}
}
};
//CUSTOMCLICKLISTENER
}
//COUNTDOWNTIMER
// SEARCH WORD, ADD WORD TO LV (if in database), SCORE
}
XML
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/bg" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical"
android:layout_marginTop="4dp"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginRight="5dp"
android:layout_marginEnd="5dp" >
<ImageButton
android:id="#+id/Button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/hello_world" />
<ImageButton
android:id="#+id/Button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/hello_world" />
<ImageButton
android:id="#+id/Button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/hello_world" />
<ImageButton
android:id="#+id/Button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/hello_world" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical"
android:layout_marginTop="4dp"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
android:layout_marginRight="5dp"
android:layout_marginEnd="5dp" >
<ImageButton
android:id="#+id/Button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/hello_world" />
<ImageButton
android:id="#+id/Button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/hello_world" />
<ImageButton
android:id="#+id/Button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/hello_world" />
<ImageButton
android:id="#+id/Button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/hello_world" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical"
android:layout_marginTop="4dp"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
android:layout_marginRight="5dp"
android:layout_marginEnd="5dp" >
<ImageButton
android:id="#+id/Button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/hello_world" />
<ImageButton
android:id="#+id/Button10"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/hello_world" />
<ImageButton
android:id="#+id/Button11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/hello_world" />
<ImageButton
android:id="#+id/Button12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/hello_world" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical"
android:layout_marginTop="4dp"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
android:layout_marginRight="10dp"
android:layout_marginEnd="10dp" >
<ImageButton
android:id="#+id/Button13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/hello_world" />
<ImageButton
android:id="#+id/Button14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/hello_world" />
<ImageButton
android:id="#+id/Button15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/hello_world" />
<ImageButton
android:id="#+id/Button16"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/hello_world" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
i will give you an idea because you made it clear you have no idea, so writing codes will make no sense, that's why you couldnt provide codes yourself, so Sir, the Imagebutton from what i see with this image is in a viewgroup, now go this documentaion to learn about viewgroups then get your touch listener or event listener, and focus it on your view group, and get the particular child -( Imagebutton) with forcus, in your view group with Viewgroup.findFocus() and then move on.. Get the idea now?? try it..
EDIT1:-= First all, great and i get you..but why dont you use gridview and make them act like they buttons, and with that you can have or be able to connet them by catching the item that was clicked and doing what you wona do..
so basically you add the letters to the items(buttons) in your adapter and then get the clicked item in your girdview here is just some intro in your adapterinflate or create a button and add the letter to it by View.setTag((String)"K-your letter") then in your onclick get it by
GridView.setOnItemClickListener(new OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> arg0, final View arg1, final int arg2,long arg3) {
//gettting your letters
String letter = (String) arg1.getTag();
//add it to your word formation using any custom method.
}
});
this is much easier looking at what you want...plus you could style the getview..
Real Deal (Me tryna use your codes)
now coming to your way of it..declaring each imagebutton in xml, will, be a lot tedious..
so do this, in your java
for(int i = 0; i < 16){
ImageButton ib = new ImageButton(Context);
ib.setClickable(true);
ib.setFocusableInTouchMode(true);
ib.setFocucsable(true);
ib.setTag((String)"K-your letter") // i am using tags, but save/add it they way you save it
ViewGroup.addView(ib); // create a viewgroup object and add it to it, dont use the class like i did.. but should be like this
}
// then your viewgroup as an object setOnclick listener for it..
ViewGroup.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View view) {
// TODO Auto-generated method stub
View myclickedimagebutton = ViewGroup.findFocus(); // this finds the view that has focus in the viewgroup, so the view that was clicked
// now flirt with myclickedimagebutton
//when you done flirting with him
ViewGroup.clearChildFocus(myclickedimagebutton); // making sure he now loosees focus
}
});
NOTE my closing tags may be mal formed check it and try it, im writing from a raw hand
also my code formats may also be wrong so check for silly spellings..
also when you create your viewgroup, set focusable, clickable to true..
let me know if it helps
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//I am using gridview
GridView gv = (GridView) findViewById(R.id.gridView1);
//this is the adapter for your 16 buttons..
Adapter adapt; // we have not instatiate it yet..
//this is your items to fill yyour adapter ,that is, your random letters
ArrayList<String> letters = new ArrayList<String>(); //add your letters to it..
//using the logic on one of my answers on your questions add 16 different letter string to this letters array.
//i dont think i am pose to cover that right?
//instatiate adapt here below
adapt = new Adapter(context, R.layout.layout_containing_your_imagebutton, letters);
gv.setAdapter(adapt); //setting the adapter
gv.setOnTouchListener(new OnTouchListener() {// this in the ontouch
#Override
public boolean onTouch(View arg0, MotionEvent event) {
// TODO Auto-generated method stub
if(event.getAction() == MotionEvent.ACTION_DOWN){
// this is when the user's hand is on the gridview
//docode can comes here
return true;
}
if(event.getAction() == MotionEvent.ACTION_MOVE){
// this is when the user's hand is moving on the gridview
//docode can comes here
return true;
}
if(event.getAction() == MotionEvent.ACTION_UP){
// this is when the user's hand is raised up;;
return true;
}
return false;
}
});
}
void dococde(ViewGroup v){ // the v here is the arg0 in the touch listener- dont forget to cast it when you reference it
//put docode in one of the touch event that pleases you..
String clicked_or_touch_letter_for_formation_by_user = (String) v.getFocusedChild().getTag();
// add clicked_or_touch_letter_for_formation_by_user to your word adapter.
}
static class Adapter extends ArrayAdapter<String> {
ArrayList<String> list;
Context context;
int resource;
public Adapter(Context context, int resource, ArrayList<String> objects) {
super(context, resource, objects);
// TODO Auto-generated constructor stub
this.list = objects;
this.context = context;
this.resource = resource;
}
#Override
public int getCount() {
// TODO Auto-generated method stub
return list.size();
}
#Override
public View getView(final int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
View child = convertView;
RecordHolder holder;
LayoutInflater inflater = ((Activity) context).getLayoutInflater();
if (child == null) {
child = inflater.inflate(resource, parent, false);//resource should be one layout with one imagebutton..
// that's the imagebutton you want to inflate 16 times.. or have in your gridview..
holder = new RecordHolder();
holder.letter = (ImageButton) child.findViewById(R.id.yourimagebuttonid); //id to your imagebutton
child.setTag(holder);
}else{
holder = (RecordHolder) child.getTag();
}
final String iLetter = list.get(position);
holder.letter.setTag(iLetter);
return child;
}
}
static class RecordHolder {
ImageButton letter;
}
i got a lil busy.. but is just the idea or logic im talking about, try and it, note my closing tags and other formatting might be bad or mal formed so correct them with the edittors and add your respective id's and layouts and try, will work.. and dont forget to upvote or notify if it helped you

PageViewer white borders on top and bottom

My image is not adapting the screen completely. Is getting with white borders at the top and bottom
My images have 700x1002.
Please can someone help me get these edges and make the image/container fully fit the screen?
layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/linearActions" >
<android.support.v4.view.ViewPager
android:id="#+id/tourImageViewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</android.support.v4.view.ViewPager>
</FrameLayout>
<LinearLayout
android:id="#+id/linearActions"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/tour_bg"
android:orientation="horizontal" >
<Button
android:id="#+id/btnIdentify"
android:layout_width="wrap_content"
android:layout_height="45dp"
android:layout_marginBottom="24dp"
android:layout_marginLeft="30dp"
android:background="#color/buttonColorWhite"
android:layout_marginTop="27dp"
android:textSize="16sp"/>
<Button
android:id="#+id/btnGoHome"
android:layout_width="wrap_content"
android:layout_height="45dp"
android:layout_marginBottom="24dp"
android:layout_marginLeft="60dp"
android:layout_marginRight="30dp"
android:layout_marginTop="27dp"
android:background="#color/buttonColorBlue"
android:textSize="16sp"/>
</LinearLayout>
<RelativeLayout
android:id="#+id/relativeCircle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/linearActions"
android:layout_marginBottom="24dp"
android:background="#null" >
<com.viewpagerindicator.CirclePageIndicator
android:id="#+id/tourImageIndicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
app:fillColor="#027CC3"
app:pageColor="#CCCCCC" />
</RelativeLayout>
</RelativeLayout>
MyAdapter:
public class MyAdapter extends PagerAdapter {
Activity activity;
int imageArray[];
public MyAdapter(Activity act, int[] imgArray) {
imageArray = imgArray;
activity = act;
}
public Object instantiateItem(View collection, int position) {
ImageView view = new ImageView(activity);
view.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,
LayoutParams.MATCH_PARENT));
view.setScaleType(ScaleType.FIT_CENTER);
view.setImageResource(imageArray[position]);
((ViewPager) collection).addView(view, 0);
return view;
}
#Override
public void destroyItem(View arg0, int arg1, Object arg2) {
((ViewPager) arg0).removeView((View) arg2);
}
#Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == ((View) arg1);
}
#Override
public int getCount() {
return imageArray.length;
}
#Override
public Parcelable saveState() {
return null;
}
}
try to change your view.setScaleType(ScaleType.FIT_CENTER); to view.setScaleType(ScaleType.CENTER_CROP);
Its little bit late but none of the solution stated above did not work for me. So thought of sharing my solution which perfectly works.
If we set the ScaleType and Params in view(ImageView) then we might face problems either with LinerLayout/RelativeLayout.
So just set the ScaleType of ImageView something like below in viewpagerAdapter layout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/sampleImage"
android:id="#+id/img_pager_item"
android:scaleType="center"
android:clickable="false"
/>

Gridview multiline Textview cut off

I have a GridView and each cell has an ImageView with TextView under it. Unfortunately if the TextView has more than one line the text gets cut off. I have tried everything but I cant find a solution.
It seems that the row height of the GridView is the problem and not the actual text because you can see half of the text in the Textview.
Here is my code:
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
GridView gridView = (GridView) findViewById(R.id.gridView1);
gridView.setAdapter(new ImageAdapter());
gridView.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> arg0, View v, int position, long id) {
startActivity(new Intent(Main.this, Acronyms.class));
}
});
}
public class ImageAdapter extends BaseAdapter {
private Integer[] iconImg = {
R.drawable.acronyms, R.drawable.acronyms,
R.drawable.acronyms
};
private String[] iconTitle = {
"Acronyms", "Cardiac Strips",
"Test 3"
};
public int getCount() {
return iconImg.length;
}
public Object getItem(int arg0) {
return null;
}
public long getItemId(int arg0) {
return 0;
}
public View getView(int position, View convertView, ViewGroup parent) {
View view = null;
if (convertView == null) {
LayoutInflater inflater = getLayoutInflater();
view = inflater.inflate(R.layout.icon, null);
TextView textView = (TextView) view.findViewById(R.id.icon_text);
textView.setText(iconTitle[position]);
ImageView imageView = (ImageView) view.findViewById(R.id.icon_image);
imageView.setImageResource(iconImg[position]);
} else {
view = convertView;
}
return view;
}
}
main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#a3e6ff"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:shadowDx="0"
android:shadowDy="0"
android:shadowRadius="25"
android:text="Example"
android:textColor="#248fb7"
android:textSize="40dp"
android:typeface="serif" android:gravity="center_horizontal"/>
<GridView
android:id="#+id/gridView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnWidth="90dp"
android:horizontalSpacing="10dp"
android:numColumns="3"
android:stretchMode="columnWidth"
android:verticalSpacing="15dp" >
</GridView>
</LinearLayout>
and my icon.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/grid_icon_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical" >
<ImageView
android:id="#+id/icon_image"
android:layout_width="90dp"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/icon_text"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:maxLines="2"
android:singleLine="false"
android:text="Samples Samples"
android:textColor="#FFFFFF"
android:textSize="15dp"
android:typeface="serif" />
</LinearLayout>
And here is a screenshot:
I resolved using, when i define it
TextView.setLines(2);
in the xml the textview is
android:layout_width="wrap_content"
android:layout_height="wrap_content"
[EDIT1]
You could try using a RelativeLayout instead of a Linear Layout for the icon.xml.
If this doesnt work then I would then move to a static height TextView. From looking at your screenshot, it looks like you will always use the same image, and the text is either going to be 1 line or 2. Just make the text height static to allow for 2 lines.
[ORIGINAL]
I think the problem is in your linear layout definition for your icon.xml. In your definition, you have the layout having "match_parent" as the width and height parameters. You should, since these are to essentially be subviews within the gridview be "wrap_content". Here is what I think it should be
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/grid_icon_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical" >
<ImageView android:id="#+id/icon_image"
android:layout_width="90dp"
android:layout_height="wrap_content" />
<TextView android:id="#+id/icon_text"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:maxLines="2"
android:singleLine="false"
android:text="Samples Samples"
android:textColor="#FFFFFF"
android:textSize="15dp"
android:typeface="serif" />
</LinearLayout>
Change ConstraintLayout for LinearLayout.
Make sure you are using ConstraintLayout and if possible change by LinearLayout. For long texts, Constraint is not very good.

How to combine two view in ViewPager Android?

I'm creating ViewPager with CirclePageIndicator.There are two View inside. Right now, It's showing two View in one page. But when i scroll to next the previous one is showing. It means it is showing like previous one + new.
Current Look like:
ItemA, ItemB | ItemB, ItemC | ItemC, ItemD |
Expected look like
ItemA, ItemB | ItemC, ItemD | ItemE, ItemF |
How can i fix it?
Is there any way to combine this two ItemA and ItemB?
Here is my code.
Adapter
public class ViewPagerAdapter extends PagerAdapter {
// Declare Variables
Context context;
ViewPager pager;
String[] domain;
String[] title;
int[] flag;
LayoutInflater inflater;
public ViewPagerAdapter(ViewPager pager,Context context, String[] domain,
String[] title, int[] flag) {
this.pager= pager;
this.context = context;
this.domain = domain;
this.title = title;
this.flag = flag;
}
#Override
public int getCount() {
//Show the CirclePageIndicator for only half of array.
return (int) Math.ceil((double)title.length/2);
// return title.length;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == ((RelativeLayout) object);
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View itemView = inflater.inflate(R.layout.related_article_item, container,
false);
// Locate the TextViews in viewpager_item.xml
final Button btnSave = (Button) itemView.findViewById(R.id.btn_save);
final Button btnLike = (Button) itemView.findViewById(R.id.btn_like);
final TextView tv_domain = (TextView) itemView.findViewById(R.id.domain_text);
TextView tv_title = (TextView) itemView.findViewById(R.id.title_text);
ResizableImageView imageView = (ResizableImageView) itemView.findViewById(R.id.imageViewDynamic);
final ProgressBar progressBar = (ProgressBar) itemView.findViewById(R.id.loading);
// Capture position and set to the TextViews
tv_domain.setText(domain[position]);
tv_title.setText(title[position]);
// Locate the ImageView in viewpager_item.xml
imageView.setImageResource(flag[position]);
// Add viewpager_item.xml to ViewPager
((ViewPager) container).addView(itemView);
return itemView;
}
//This is the code to show two view inside one page.
#Override
public float getPageWidth(int position) {
return (0.5f);
}
// return (super.getPageWidth(position) / 2);
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
// Remove viewpager_item.xml from ViewPager
((ViewPager) container).removeView((RelativeLayout) object);
}
}
MainActivity
public class TestingActivity extends ActionBarActivity {
// Declare Variables
ViewPager viewPagerRelated;
PagerAdapter adapter;
String[] title;
String[] domain;
int[] flag;
ViewPager pager1;
CirclePageIndicator mIndicator;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Get the view from viewpager_main.xml
setContentView(R.layout.viewpager_main);
title = new String[]{"Sample1", "Sample2", "Sample3",
"Sample4", "Sample5", "Sample6", "Sample7", "Sample8",
"Sample9", "Sample10"};
domain = new String[]{"text1", "text1",
"text1", "text1", "text1", "text1",
"text1", "text1", "text1", "text1"};
flag = new int[]{R.drawable.arsenal, R.drawable.aston_villa,
R.drawable.manchester_city, R.drawable.liverpool,
R.drawable.chelsea, R.drawable.manchester_united, R.drawable.swansea,
R.drawable.liverpool, R.drawable.west_brom, R.drawable.west_ham};
// Locate the ViewPager in viewpager_main.xml
viewPagerRelated = (ViewPager) findViewById(R.id.pager2);
// Pass results to ViewPagerAdapter Class
adapter = new ViewPagerAdapter(pager1, ArticleViewActivityV2.this, domain,
title, flag);
// Binds the Adapter to the ViewPager
viewPagerRelated.setAdapter(adapter);
// viewPagerRelated.setPageMargin(3);
// ViewPager Indicator
mIndicator = (CirclePageIndicator) findViewById(R.id.indicator_pager);
mIndicator.setViewPager(viewPagerRelated);
}
}
XML Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
layout="#layout/related_article_item"
android:id="#+id/article_1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
<include
layout="#layout/related_article_item"
android:id="#+id/article_2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"/>
</LinearLayout>
Item XML
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="220dp"
android:background="#drawable/gridview_item_selector"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp">
<RelativeLayout
android:id="#+id/imageLayout"
android:layout_width="200dp"
android:layout_height="100dp">
<com.bindez.news.utils.ResizableImageView
android:id="#+id/imageViewDynamic"
android:layout_width="match_parent"
android:layout_height="100dp"
android:src="#drawable/app_icon" />
<ProgressBar
android:id="#+id/loading"
style="?android:attr/progressBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:padding="10dp"
android:visibility="visible" />
</RelativeLayout>
<TextView
android:id="#+id/title_text"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_below="#+id/imageLayout"
android:layout_marginTop="7dp"
android:maxLines="10"
android:paddingLeft="7dp"
android:paddingRight="7dp"
android:paddingTop="7dp"
android:text="Title Text"
android:textColor="#color/tile_text"
android:textSize="14sp" />
<TextView
android:id="#+id/domain_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/title_text"
android:layout_marginBottom="3dp"
android:ellipsize="end"
android:maxLines="1"
android:paddingBottom="7dp"
android:paddingLeft="7dp"
android:paddingRight="7dp"
android:text=""
android:textColor="#color/text_gray"
android:textSize="12sp" />
<TextView
android:id="#+id/seperator"
android:layout_width="fill_parent"
android:layout_height="1px"
android:layout_below="#+id/domain_text"
android:background="#color/light_gray_seperator" />
<Button
android:id="#+id/btn_save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/seperator"
android:background="#android:color/transparent"
android:drawableRight="#drawable/ic_unsave"
android:minHeight="0dp"
android:minWidth="0dp"
android:paddingBottom="5dp"
android:paddingRight="7dp"
android:paddingTop="5dp" />
<Button
android:id="#+id/btn_like"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/seperator"
android:background="#android:color/transparent"
android:drawableLeft="#drawable/ic_unlike"
android:drawablePadding="5dp"
android:minHeight="0dp"
android:minWidth="0dp"
android:paddingBottom="5dp"
android:paddingLeft="7dp"
android:paddingRight="7dp"
android:paddingTop="5dp"
android:text=""
android:textColor="#color/btn_green"
android:textSize="14sp" />
</RelativeLayout>
</RelativeLayout>

Categories

Resources