Simple ViewPager for Android

      22 Comments on Simple ViewPager for Android
You would have seen many applications recently, which make use of the new and awesome ViewPager that allows views to be horizontally scrollable. The new Android Market app also implements a flavor of the ViewPager, although it’s a little more complex that what we will see here. This class is not available directly for you to use. Check this blog for some insight. It would required you to download a compatibility library from Google, add it to your project wherever you would like to use it, and go about paging views.

And yes, it’s very simple to implement. I have coded up a little sample where it shows you how to use a ViewPager with a simple PagerAdapter. More or less, it works like the ListViews. Although there is not much documentation for this, it’s quite easy to set up everything.

Firstly, you would need to add the ViewPager into your layout file.

Listing of main.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
    android:orientation=”vertical” android:layout_width=”fill_parent”
    android:layout_height=”fill_parent”>
    <TextView android:text=”Page 1″ android:id=”@+id/textViewHeader”
        android:layout_width=”fill_parent” android:layout_height=”wrap_content”
        android:gravity=”center” android:padding=”10dip” android:textStyle=”bold”></TextView>
    <android.support.v4.view.ViewPager
        android:layout_width=”fill_parent” android:layout_height=”fill_parent”
        android:id=”@+id/viewPager” />
</LinearLayout>

In this sample, we are using an extra TextView which would show the current page you are on.

Setting up the ViewPager

ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
MyPagerAdapter adapter = new MyPagerAdapter(this);

viewPager.setAdapter(adapter);

This code is almost identical to what we would do for a ListView or Gallery. The only difference is that the adapter here, extends a PagerAdapter instead.

The PagerAdapter

The PagerAdapter has a few methods that you would implement. For this example, I have four different views, one for each page. 2 are ListViews, a TextView and a Button, not in that order. Here are the methods that you would need to implement. Look at the MyPageAdapter class for more.

@Override
public void destroyItem(View view, int arg1, Object object) {
         ((ViewPager) view).removeView((View)object);
}
@Override
public int getCount() {
          return views.size();
}
@Override
public Object instantiateItem(View view, int position) {
           View view = views.get(position);
           ((ViewPager) view).addView(view);
           return view;
}
@Override
public boolean isViewFromObject(View view, Object object) {
           return view == object;

}

 And you are done!!! Sweet…. You can find the whole source code here.

22 thoughts on “Simple ViewPager for Android”

  1. Felix

    Nice work but my app crashes everytime when sliding the second time (3rd page or back to first) at ViewRoot.draw No matter if i use your idea or inflating the views. can you say me what to do?

    ↓
  14. Devavrata Sharma

    I have implemented a viewpager which contains different views inside it like, imageview then videoview etc. What I am trying to implement is pinch zoom, pan and drag on the viewpager so that irrespective of any specific view inside viewpager, I can perform pinch zoom, pan and drag on it.

    Another challenge is by default viewpager has a event for touch via which it performs switching of views inside it. If anybody went through this or have idea about this case, please advise me.

    Help is appreciated. Thanks 🙂

    ↓
  15. Devavrata Sharma

    I have implemented a viewpager which contains different views inside it like, imageview then videoview etc. What I am trying to implement is pinch zoom, pan and drag on the viewpager so that irrespective of any specific view inside viewpager, I can perform pinch zoom, pan and drag on it.

    Another challenge is by default viewpager has a event for touch via which it performs switching of views inside it. If anybody went through this or have idea about this case, please advise me.

    Help is appreciated. Thanks 🙂

    ↓
  19. Anonymous

    HI

    when ever i swap to some next image, and on back press i have finished the activity, but it ends only that image but not the all the imageview…

    so it has created a kinda loop for me which i dont want

    ↓

Leave a Reply