Post
Ask Question

Android ViewPager

Introduction

 
ViewPager is a simple layout manager to mover through views using the simple left and right swipes.
 
It was not available till android SDK 11 so we will need to import the android support library v4 or v13
 
It is used in managing fragments but in this article, we are going to implement a simple ImageView swipe.
 
This demo uses 4 images android1.jpg .... android4.jpg so first get these images or download the source code
 
It also uses a background resource from an earlier article android buttons background
 
Now let's start, create a new project, import the android v4 support library 
 
Now open activity_main.xml file
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical"  
  6.     >  
  7.     <android.support.v4.view.ViewPager  
  8.         android:id="@+id/viewPager"  
  9.         android:layout_height="match_parent"  
  10.         android:layout_width="match_parent"  
  11.         android:layout_weight="1"  
  12.     />  
  13.     <LinearLayout  
  14.         android:layout_height="50dp"  
  15.         android:layout_width="match_parent"  
  16.         android:background="#C799AA"  
  17.         >  
  18.         <Button  
  19.             android:id="@+id/previousButton"  
  20.             android:layout_height="wrap_content"  
  21.             android:layout_width="80dp"  
  22.             android:padding="10dp"  
  23.             android:text="Previous"  
  24.             android:textSize="14sp"  
  25.             android:background="@drawable/button_background"  
  26.             android:layout_margin="5dp"  
  27.             android:textColor="#ffffff"  
  28.             android:enabled="false"  
  29.             />  
  30.         <TextView  
  31.             android:id="@+id/positionTextView"  
  32.             android:layout_height="wrap_content"  
  33.             android:layout_width="fill_parent"  
  34.             android:gravity="center"  
  35.             android:layout_weight="1"  
  36.             android:padding="5dp"  
  37.             android:layout_gravity="center_vertical"  
  38.             android:textColor="#000000"  
  39.             android:textSize="15sp"  
  40.             />  
  41.         <Button  
  42.             android:id="@+id/nextButton"  
  43.             android:layout_height="wrap_content"  
  44.             android:layout_width="80dp"  
  45.             android:padding="10dp"  
  46.             android:text="Next"  
  47.             android:textSize="14sp"  
  48.             android:background="@drawable/button_background"  
  49.             android:layout_margin="5dp"  
  50.             android:textColor="#ffffff"  
  51.             />  
  52.     </LinearLayout>  
  53. </LinearLayout> 
     
Here android.support.v4.view.ViewPager is the tag for the ViewPager as it is imported from the android v4 support library
 
Rest is self-explanatory i.e. two Buttons for next and previous, a TextView for indicating the position.
 
Now open MainActivity.java
  1. import android.app.Activity;  
  2. import android.os.Bundle;  
  3. import android.support.v4.view.PagerAdapter;  
  4. import android.support.v4.view.ViewPager;  
  5. import android.support.v4.view.ViewPager.OnPageChangeListener;  
  6. import android.view.Menu;  
  7. import android.view.View;  
  8. import android.view.View.OnClickListener;  
  9. import android.view.ViewGroup;  
  10. import android.widget.Button;  
  11. import android.widget.ImageView;  
  12. import android.widget.LinearLayout.LayoutParams;  
  13. import android.widget.TextView;  
  14.   
  15. public class MainActivity extends Activity {  
  16.   
  17.     private int[] images = {R.drawable.android1, R.drawable.android2, R.drawable.android3, R.drawable.android4, R.drawable.android5};  
  18.     private ViewPager mViewPager;  
  19.     private MyPagerAdapter myPagerAdapter;  
  20.     private Button nextButton, previousButton;  
  21.     private TextView positinTextView;  
  22.     private int imageCount = images.length;  
  23.      
  24.     @Override  
  25.     protected void onCreate(Bundle savedInstanceState) {  
  26.         super.onCreate(savedInstanceState);  
  27.         setContentView(R.layout.activity_main);  
  28.          
  29.         /* 
  30.          * Initialize every Object 
  31.          */  
  32.         myPagerAdapter = new MyPagerAdapter();  
  33.          
  34.         previousButton = (Button)findViewById(R.id.previousButton);  
  35.         nextButton = (Button)findViewById(R.id.nextButton);  
  36.          
  37.         positinTextView = (TextView)findViewById(R.id.positionTextView);  
  38.          
  39.         mViewPager = (ViewPager)findViewById(R.id.viewPager);  
  40.         mViewPager.setAdapter(myPagerAdapter);  
  41.          
  42.         /* 
  43.          * ViewPager's setCurrentItem(int) method is used here to set the first image although not required   
  44.          */  
  45.         mViewPager.setCurrentItem(0);  
  46.         positinTextView.setText("1 of "+imageCount);  
  47.          
  48.         /* 
  49.          * Set OnPageChangeListener 
  50.          * In onPageSelected enable/disable next/previous buttons and set the value in poistionTextView 
  51.          */  
  52.         mViewPager.setOnPageChangeListener(new OnPageChangeListener() {  
  53.              
  54.             @Override  
  55.             public void onPageSelected(int position) {  
  56.                 // TODO Auto-generated method stub  
  57.                 positinTextView.setText((position+1)+" of "+imageCount);  
  58.                 if (position==imageCount-1) {  
  59.                     nextButton.setEnabled(false);  
  60.                 }  
  61.                 else {  
  62.                     nextButton.setEnabled(true);  
  63.                 }  
  64.                 if (position==0) {  
  65.                     previousButton.setEnabled(false);  
  66.                 }  
  67.                 else {  
  68.                     previousButton.setEnabled(true);  
  69.                 }  
  70.             }  
  71.              
  72.             @Override  
  73.             public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {  
  74.             }  
  75.              
  76.             @Override  
  77.             public void onPageScrollStateChanged(int state) {  
  78.             }  
  79.         });  
  80.          
  81.         /* 
  82.          * Set OnClickListener on buttons to change the Image in ViewPager 
  83.          */  
  84.         nextButton.setOnClickListener(new OnClickListener() {  
  85.             @Override  
  86.             public void onClick(View v) {  
  87.                 // TODO Auto-generated method stub  
  88.                 mViewPager.setCurrentItem(mViewPager.getCurrentItem()+1);  
  89.             }  
  90.         });  
  91.          
  92.         previousButton.setOnClickListener(new OnClickListener() {  
  93.             @Override  
  94.             public void onClick(View v) {  
  95.                 // TODO Auto-generated method stub  
  96.                 mViewPager.setCurrentItem(mViewPager.getCurrentItem()-1);  
  97.             }  
  98.         });  
  99.     }  
  100.   
  101.     @Override  
  102.     public boolean onCreateOptionsMenu(Menu menu) {  
  103.         // Inflate the menu; this adds items to the action bar if it is present.  
  104.         getMenuInflater().inflate(R.menu.main, menu);  
  105.         return true;  
  106.     }  
  107.   
  108.     /* 
  109.      * Pager Adapter for ViewPager 
  110.      * We have to override 4 methods as done below 
  111.      */  
  112.     private class MyPagerAdapter extends PagerAdapter {  
  113.          
  114.         public MyPagerAdapter(){}  
  115.          
  116.         /* 
  117.          * Returns the 
  118.          */  
  119.         @Override  
  120.         public int getCount() {  
  121.             return imageCount;  
  122.         }  
  123.   
  124.         @Override  
  125.         public View instantiateItem(ViewGroup container, int position) {  
  126.             /* 
  127.              * We dynamically create an ImageView but we could have inflated a layout if needed 
  128.              */  
  129.             ImageView mImageView = new ImageView(MainActivity.this);  
  130.             mImageView.setImageResource(images[position]);  
  131.              
  132.             // Now just add ImageView to ViewPager and return it  
  133.             container.addView(mImageView, LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);  
  134.   
  135.             return mImageView;  
  136.         }  
  137.   
  138.         @Override  
  139.         public void destroyItem(ViewGroup container, int position, Object object) {  
  140.             container.removeView((View) object);  
  141.         }  
  142.   
  143.         @Override  
  144.         public boolean isViewFromObject(View view, Object object) {  
  145.             return view == object;  
  146.         }  
  147.     }  
  148. } 
Please read the comments in between the code lines for more explanation
 
Google Documentation: http://developer.android.com/reference/android/support/v4/view/ViewPager.html
 
Article4Img1.png
 
Article4Img2.png
 
Article4Img3.png


Similar Articles