Swiping images (not layouts) with viewpager

Question

What my code does:

Here's my code which for viewpager that swipes between xml layouts (named left.xml, right.xml and center.xml).

What I want it to do

I want to swipe between images (stored in the drawable folder). When I replace R.layout.xml with R.drawable.image, my app crashes down. Can anybody help me figure it out?

public class MainActivity extends Activity {

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    MyPagerAdapter adapter = new MyPagerAdapter();
    ViewPager myPager = (ViewPager) findViewById(R.id.myfivepanelpager);
    myPager.setAdapter(adapter);
    myPager.setCurrentItem(0);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.activity_main, menu);
    return true;
}

class MyPagerAdapter extends PagerAdapter {

    public int getCount() {
        return 3;
    }

    public Object instantiateItem(View collection, int position) {

        LayoutInflater inflater = (LayoutInflater) collection.getContext()
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        int resId = 0;
        switch (position) {
        case 0:
            resId = R.layout.left;
            break;
        case 1:
            resId = R.layout.center;
            break;
        case 2:
            resId = R.layout.right;
            break;
        }

        View view = inflater.inflate(resId, null);

        ((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 Parcelable saveState() {
        return null;
    }
}

}

Holds

Answer 1

If you are using the same implementation and just adding R.drawable.XXX instead of R.layout.YYY then the problem is right there. You are using LayoutInflater to inflate ImageViews, the layout inflater as it states by itself it inflates a whole layout in a single View.

Instead of doing that try to create ImageView objects through code and then in the return return the newly created ImageView. Some sample code would be:

public Object instantiateItem(View collection, int position) {

    ImageView img = new ImageView(context); //this is a variable that stores the context of the activity
    //set properties for the image like width, height, gravity etc...

    int resId = 0;
    switch (position) {
        case 0:
            resId = R.drawable.img1;
            break;
        case 1:
            resId = R.drawable.img2;
            break;
        case 2:
            resId = R.drawable.img3;
            break;
    }

    img.setImageResource(resId); //setting the source of the image
    return img;
}

If you are just using a specific amount of images or pages you should consider adding them in the xml that contains the ViewPager rather than dynamically creating the ViewPager.

Inadvertent

Thanks but it still doesnt work, I tried xml version of imageview aswell as dynamic image view. And no I have alot of images to display so I cannot write an xml file for that. – Holds

I forgot 1 line of code: ((ViewPager) collection).addView(img, 0); – Inadvertent

Another question sorry, is there a way I dont have to write R.drawable.img for every image? Because I have to add ALOT of images! – Holds

@Inadvertent U Both saved me.. Adnan Zahid – Hamstring

@AdnanZahid store the IDs to array. – Acculturize

Answer 2

I think one option would be to insert each image into its own layout with an ImageView and then inflate the layout that the image is in rather than the image itself.

Igal