ViewPager behaves in an unexpected way

ViewPager behaves in an unexpected way

My goal is to implement a Guide/How-To-Use-App Activity in my app, where
users can flip between a predefined set of views. So, I decided to use
ViewPager.
This is how I did in my GuideActivity:
mPager = (ViewPager) findViewById(R.id.pager);
mAdapter = new GuideAdapter(getBaseContext());
mPager.setAdapter(mAdapter);
And this is my implementation of PagerAdapter:
class GuideAdapter extends PagerAdapter {
private Context context;
protected static final int[] SLIDES = new int[] {
R.drawable.page1, R.drawable.page2, R.drawable.page3 };
public GuideAdapter(Context context) {
this.context = context;
}
@Override
public View instantiateItem(ViewGroup container, int position) {
ImageView image = new ImageView(container.getContext());
image.setImageResource(SLIDES[position]);
container.addView(image, LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT);
return image;
}
@Override
public void destroyItem(ViewGroup collection, int position, Object
view) {
((ViewPager) collection).removeView((View) view);
}
@Override
public int getCount() {
return SLIDES.length;
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return true;
}
}
The problem is, the images is drawn in top of each other. If I scroll from
left to right, I see no images. If I scroll back, images shown for a
second then disappear. Bottom Line: my ViewPager behave in an unexpected
way!
I overridden the four required methods in PagerAdapter. I'm not sure what
I did wrong but I think it has something to do with instantiateItem()
and/or destroyItem().
Any Ideas?