CODEWITHSUNDEEP
androidandroid-viewpager
Adam Johns
Adam Johns

Reputation: 36343

Add multiple images and text to each ViewPager slide

I have a ViewPager with 3 slides. On each slide I want to be able to add 3 images and a couple different text labels. The code I currently have allows me to add a single image to each slide. I'm confused on how to get this work with multiple images and text for each slide. Any help would be appreciated.

public class ImageAdapter extends PagerAdapter {

    private final Context context;
    private final int[] GalImages = new int[] {
        R.drawable.workout_widget_master,
        R.drawable.workout_widget_master,
        R.drawable.workout_widget_master
    };

    ImageAdapter(Context context){
        this.context=context;
    }
    @Override
    public int getCount() {
        return GalImages.length;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        ImageView imageView = new ImageView(context);
        int padding = 10;
        imageView.setPadding(padding, padding, padding, padding);
        imageView.setScaleType(ImageView.ScaleType.MATRIX);
        imageView.setImageResource(GalImages[position]);
        container.addView(imageView, 0);
        return imageView;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((ImageView) object);
    }
}

Upvotes: 2

Views: 4852

Answers (4)

Manwal
Manwal

Reputation: 23816

If your want detail Explanation and using ViewPagerIndicator

ViewPagerIndicator Dynamic Layout

I had done some research and found this solution for Dynamic layouts.

Question: Android: ViewPagerIndicator - Creating different layouts for different pages

Answer: https://stackoverflow.com/a/10696360/2236219

Performing click event for each layout

Using Gesture Listener:

Question: Touch or Click event ViewPagerIndicator in Android

Answer: https://stackoverflow.com/a/23016638/2236219

Upvotes: 0

Jogendra Gouda
Jogendra Gouda

Reputation: 405

create a view as per your requirement which will contain number of images and text you want.

in public Object instantiateItem(ViewGroup container, int position) inflate your that layout and add to view pager it will work perfectly.

Upvotes: 1

Niraj Adhikari
Niraj Adhikari

Reputation: 1728

public class ViewPagerAdapter2 extends PagerAdapter {

Context context;
String[] image1;
String[] description;


LayoutInflater inflater;

public ViewPagerAdapter2(Context context, String[] image1,String[] description) {
    this.context = context;
    this.image1 = image1;
    this.description=description;


}

@Override
public boolean isViewFromObject(View view, Object object) {
    return view == ((LinearLayout) object);
}

@Override
public Object instantiateItem(ViewGroup container, int position) {


    TextView des;

    inflater = (LayoutInflater) context
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View itemView = inflater.inflate(R.layout.slider, container,
            false);
    des = (TextView) itemView.findViewById(R.id.slider_des);
    des.setText(description[position]);

     AQuery aq = new AQuery(itemView);
     aq.id(R.id.imageView1).image(image1[position], true, true, 0, 0, null, AQuery.FADE_IN, AQuery.RATIO_PRESERVE);

     ((ViewPager) container).removeView(itemView);



    ((ViewPager) container).addView(itemView);

    return itemView;
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
    ((ViewPager) container).removeView((LinearLayout) object);

}

@Override
public int getCount() {
    // TODO Auto-generated method stub
    return description.length;

}

}

this is an implementation of exactly what you want... now declare the variables for textview contents , declare the imageviews , bind em together... this should work...on your activity pass on the variables in the declared order to the adapter. the solution will work flawlessly. Ive used aquery to get image from url. you can simply pass on the image resource and bind it via imageview.setImageResource(); method

Upvotes: 10

Jivraj S Shekhawat
Jivraj S Shekhawat

Reputation: 352

instead of this line of code container.addView(imageView, 0);

write down ((VIewPager)container).addView(imageview, null);

this will add all the images of array provided above in one pager

for implementing three pagers

Step 1: Declare 3 viewpagers in xml and then in main activity

initialize each with new pager and set adapter as ImageAdapter object;

Upvotes: 2

Related Questions