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;
  15. public class MainActivity extends Activity {
  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;
  24. @Override
  25. protected void onCreate(Bundle savedInstanceState) {
  26. super.onCreate(savedInstanceState);
  27. setContentView(R.layout.activity_main);
  29. /*
  30. * Initialize every Object
  31. */
  32. myPagerAdapter = new MyPagerAdapter();
  34. previousButton = (Button)findViewById(R.id.previousButton);
  35. nextButton = (Button)findViewById(R.id.nextButton);
  37. positinTextView = (TextView)findViewById(R.id.positionTextView);
  39. mViewPager = (ViewPager)findViewById(R.id.viewPager);
  40. mViewPager.setAdapter(myPagerAdapter);
  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);
  48. /*
  49. * Set OnPageChangeListener
  50. * In onPageSelected enable/disable next/previous buttons and set the value in poistionTextView
  51. */
  52. mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
  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. }
  72. @Override
  73. public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
  74. }
  76. @Override
  77. public void onPageScrollStateChanged(int state) {
  78. }
  79. });
  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. });
  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. }
  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. }
  108. /*
  109. * Pager Adapter for ViewPager
  110. * We have to override 4 methods as done below
  111. */
  112. private class MyPagerAdapter extends PagerAdapter {
  114. public MyPagerAdapter(){}
  116. /*
  117. * Returns the
  118. */
  119. @Override
  120. public int getCount() {
  121. return imageCount;
  122. }
  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]);
  132. // Now just add ImageView to ViewPager and return it
  133. container.addView(mImageView, LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
  135. return mImageView;
  136. }
  138. @Override
  139. public void destroyItem(ViewGroup container, int position, Object object) {
  140. container.removeView((View) object);
  141. }
  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