Sunday, September 9, 2012

Android view pager

Android view pager is a layout manager that allows the user to flip left and right through pages of data. This article provides an example implementation of Android view pager which can be swiped left and right between 2 images.

Create a new Android application project and include a layout with a view pager.
 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.v4.view.ViewPager
        android:id="@+id/mypages"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

Next step is to create our own pager adapter which extends from the PagerAdapter and overrides some methods.  For example, in this sample implementation we create two ImageView's in the pager adapter. Key methods to override include getCount(), instantiateItem() and destroyItem() which are self explanatory from the code below.
private class MyPagerAdapter extends PagerAdapter {

 private ArrayList<ImageView> mViewsList;
 private Context mContext = null;

 public MyPagerAdapter(Context context) {
   mContext = context;
   mViewsList = new ArrayList<ImageView>();

   Resources resource = mContext.getResources();
   Bitmap bMap1 = BitmapFactory.decodeResource(resource,
     R.drawable.image1);
   ImageView image1 = new ImageView(mContext);
   image1.setImageBitmap(bMap1); 
   mViewsList.add(image1);

   Bitmap bMap2 = BitmapFactory.decodeResource(resource,
     R.drawable.image2);
   ImageView image2 = new ImageView(mContext);
   image2.setImageBitmap(bMap2); 
   mViewsList.add(image2);
 } 

 @Override
 public int getCount() {
   return mViewsList.size();
 }

 @Override
 public Object instantiateItem(View view, int position) {
   View myView = mViewsList.get(position);
   ((ViewPager) view).addView(myView);
   return myView;
 }

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

 @Override
 public void destroyItem(View view, int arg1, Object object) {
  ((ViewPager) view).removeView((ImageView) object);
 }
}

The final step is to set this custom pager adapter on the view pager layout manager. This is done in the onCreate() method of the activity.
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mMyPager = (ViewPager) findViewById(R.id.mypages);        
    mMyPagerAdapter = new MyPagerAdapter(this);
    mMyPager.setAdapter(mMyPagerAdapter);
}

Android view pager implementation is now ready. We can swipe between the 2 images horizontally either left or right.

2 comments :

  1. Excuse me. I try to follow your codes, but I have some problems. I saw the Logcat and it displayed "ava.lang.NullPointerException". I want to solve it. Please help me how to solve it.
    I would appreciate your help.

    ReplyDelete
  2. thanks...... really very informative ....

    ReplyDelete

Contact Form

Name

Email *

Message *

Back to Top