Android ViewPager Example Tutorial

Filed Under: Android

ViewPager in Android allows the user to flip left and right through pages of data. In our android ViewPager application we’ll implement a ViewPager that swipes through three views with different images and texts.

Android ViewPager

Android ViewPager widget is found in the support library and it allows the user to swipe left or right to see an entirely new screen.

Today we’re implementing a ViewPager by using Views and PagerAdapter. Though we can implement the same using Fragments too, but we’ll discuss that in a later tutorial.

The ViewPager uses a PagerAdapter whose job is to supply views to the MainActivity similar to what a ListAdapter does for a ListView.

Android ViewPager Example

android viewpager, viewpager in android, viewpager, android viewpager example tutorial

Android ViewPager Example Code

The activity_main.xml consists solely of the ViewPager as shown below.

activity_main.xml


<RelativeLayout 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"
    tools:context=".MainActivity">

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

</RelativeLayout>

The MainActivity.java is given below.

MainActivity.java


package com.journaldev.viewpager;

import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        viewPager.setAdapter(new CustomPagerAdapter(this));
    }
}

The role of the MainActivity in the above code is to just reference the ViewPager and set the CustomPagerAdapter that extends the PagerAdapter.

Before we discuss the CustomPagerAdapter class, let’s look into the ModelObject class.

ModelObject.java


package com.journaldev.viewpager;

public enum ModelObject {

    RED(R.string.red, R.layout.view_red),
    BLUE(R.string.blue, R.layout.view_blue),
    GREEN(R.string.green, R.layout.view_green);

    private int mTitleResId;
    private int mLayoutResId;

    ModelObject(int titleResId, int layoutResId) {
        mTitleResId = titleResId;
        mLayoutResId = layoutResId;
    }

    public int getTitleResId() {
        return mTitleResId;
    }

    public int getLayoutResId() {
        return mLayoutResId;
    }

}

The enum above lists all the pages of the ViewPagers. There are three pages with their respective layouts.

The layout of a single page is given below.

view_blue.xml


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:background="@android:color/holo_blue_dark"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Second View"
        android:layout_gravity="center_horizontal"
        android:textSize="28sp"
        android:textColor="@android:color/black"
        android:textStyle="bold"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/textView" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Swipe left to\nFirst View"
        android:layout_gravity="center_horizontal"
        android:textSize="20sp"
        android:textColor="@android:color/black"
        android:textStyle="bold"
        android:minLines="2"
        android:id="@+id/textView2"
        android:padding="@dimen/activity_horizontal_margin"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Swipe right to\nThird View"
        android:layout_gravity="center_horizontal"
        android:textSize="20sp"
        android:textColor="@android:color/black"
        android:textStyle="bold"
        android:padding="@dimen/activity_horizontal_margin"
        android:minLines="2"
        android:id="@+id/textView3"
        android:layout_alignTop="@+id/textView2"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

</RelativeLayout>

The remaining two pages have similar layouts and are given in the source code of this project.

CustomPagerAdapter.java


package com.journaldev.viewpager;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class CustomPagerAdapter extends PagerAdapter {

    private Context mContext;

    public CustomPagerAdapter(Context context) {
        mContext = context;
    }

    @Override
    public Object instantiateItem(ViewGroup collection, int position) {
        ModelObject modelObject = ModelObject.values()[position];
        LayoutInflater inflater = LayoutInflater.from(mContext);
        ViewGroup layout = (ViewGroup) inflater.inflate(modelObject.getLayoutResId(), collection, false);
        collection.addView(layout);
        return layout;
    }

    @Override
    public void destroyItem(ViewGroup collection, int position, Object view) {
        collection.removeView((View) view);
    }

    @Override
    public int getCount() {
        return ModelObject.values().length;
    }

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

    @Override
    public CharSequence getPageTitle(int position) {
        ModelObject customPagerEnum = ModelObject.values()[position];
        return mContext.getString(customPagerEnum.getTitleResId());
    }

}
  1. CustomPagerAdapter(Context context) : The constructor needs a Context reference. The context is saved as a member variable of the class since it’s used later to access the individual page layouts from the enum class
  2. instantiateItem : In this case, we use the enum and inflate the particular enum value’s associated layout. Then, we add the newly inflated layout to the ViewGroup(collection of Views) maintained by the PagerAdapter, and then we return that layout. The object being returned by this method is also used later on, as the second parameter in the isViewFromObject method
  3. destroyItem : This method removes a particular view from the ViewGroup maintained by the PagerAdapter
  4. getCount : It simply returns the number of views that will be maintained by the ViewPager. For this example, the count is the number of enum values in the model object
  5. isViewFromObject : This method checks whether a particular object belongs to a given position, which is made simple. As noted earlier, the second parameter is of type Object and is the same as the return value from the instantiateItem method
  6. getPageTitle : At a given position, we need to supply the PagerAdapter with a title. This usually manifests itself in the ActionBar as the Activity’s title, or sometimes tabs will hook into this method for labelling each tab. In this case we’ve kept it for labelling only

The image below shows the app in action.

android viewpager example, android ViewPager, ViewPager in android

This brings an end to ViewPager in android example tutorial. You can download the Android ViewPager Project from the below link.

Comments

  1. chavda says:

    how to change my bg color to swipe my card view in my fragments

  2. Umair says:

    Its great information. I want to know that if i want to swipe layout just like you mention in your article, I also add the actionbar/tool and have 4 menu item. It is possible i can also swipe same layout with my menu item which are showing at action bar on top. if yes then what code also entered above article and where. Thanks

  3. dipesh says:

    RED(R.string.red, R.layout.view_red),
    BLUE(R.string.blue, R.layout.view_blue),
    GREEN(R.string.green, R.layout.view_green);
    sir i get the R error … its not resolved .. its not sloved by rebuild

    1. Umer Lilla says:

      I am also facing this Problem

  4. Stefan Meyer says:

    Thanks for the tutorial.
    2 questions:
    1) Can this logic be used for Wear?
    2) Could the second view contain a button which changes the background of view 1 (for example)?

    Best regards

    1. Anupam says:

      Yes. For both.
      For the second: Refer this tutorial: Android Passing Data Between Fragments

  5. farzad says:

    hi thank you
    this is great but i have question where can i set edittext ?

  6. Santosh says:

    how to get data from sqlite to display in android viewpager

    1. Santosh says:

      please give me reply

    2. piyush kumar says:

      public class MainActivity extends AppCompatActivity {

      float x1,x2;
      float y1, y2;

      int currentPage;
      ViewPager mViewPager;
      String ID;
      List listID = new ArrayList();
      List listName = new ArrayList();
      List listMtrno = new ArrayList();
      String SearchString = null;
      CursorPagerAdapter mAdapter;
      Cursor cursor;
      DatabaseHelper databaseHelper;

      @Override
      protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);

      Bundle extras = getIntent().getExtras();

      getSupportActionBar().setDisplayShowHomeEnabled(true);

      databaseHelper = new DatabaseHelper(this);

      setContentView(R.layout.pager);

      databaseHelper = new DatabaseHelper(MainActivity.this);
      cursor = databaseHelper.fetch();
      mAdapter = new CursorPagerAdapter(this, cursor);

      mViewPager = (ViewPager) findViewById(R.id.pager);
      mViewPager.setAdapter(mAdapter);

      mViewPager.setPageTransformer(true, new ZoomOutPageTransformer());

      if (extras != null)
      {
      SearchString = extras.getString(“SearchFlag”);
      if (SearchString != null) {
      mViewPager.setCurrentItem(Integer.parseInt(SearchString) – 1);

      } else {
      if (cursor.moveToFirst()){
      while(!cursor.isAfterLast()){
      cursor.moveToNext();
      }
      }
      }
      Log.d(“MainActivity”, “Search(A): ” + SearchString);
      }
      }

      private class CursorPagerAdapter extends PagerAdapter {

      private Cursor cursor;
      private LayoutInflater inflater;

      public CursorPagerAdapter(Context context, Cursor cursor) {

      Log.d(“Main Activity”, “MyCursorPagerAdapter.onCreate()”);

      this.cursor = cursor;
      this.inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
      }
      public void swapCursor(Cursor cursor) {
      //if(cursor != null) {

      Log.d(“Main Activity”, “swapCursor().”);

      this.cursor = cursor;
      //notifyDataSetChanged();
      //}
      }
      @Override
      public int getCount() {
      if(cursor == null) {
      return 0;
      } else {
      return cursor.getCount();
      }
      }
      @Override
      public void destroyItem(ViewGroup view, int position, Object object) {

      cursor.moveToPosition(position);
      (view).removeView((LinearLayout) object);
      }
      @Override
      public Object instantiateItem(ViewGroup view, int position) {

      position = position % cursor.getCount();

      cursor.moveToPosition(position);

      LinearLayout layout = (LinearLayout) inflater.inflate(R.layout.fragment_listener, null);

      TextView f1_recno = layout.findViewById(R.id.TV_recno);
      TextView f1_acctno = layout.findViewById(R.id.TV_acctno);
      TextView f1_route = layout.findViewById(R.id.TV_route);
      TextView fl_name = layout.findViewById(R.id.TV_name);
      TextView fl_mtrno = layout.findViewById(R.id.TV_mtrno);

      f1_recno.setText((cursor.getPosition() + 1) + ” of ” + cursor.getCount() + ” records”);
      f1_acctno.setText(cursor.getString(cursor.getColumnIndex(“ACCTNO”)));
      f1_route.setText(cursor.getString(cursor.getColumnIndex(“ROUTE”)));
      fl_name.setText(cursor.getString(cursor.getColumnIndex(“NAME”)));
      fl_mtrno.setText(cursor.getString(cursor.getColumnIndex(“MTRNO”)));

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

  7. Niks says:

    How to use OnItemClickListener with viewpager and get position of clicked item and displays the clicked item???

  8. Joginder Pal Verma says:

    Really Helpful
    Thanks

  9. paolo says:

    hello, how can I reverse the order of view_red, view_green and view_blue?
    in your examples when I launch the application I see first the view_red. but if I want see the second view (middle_view) so that I can swipe right or swipe left how can I do this?

    thank you very much

  10. Tim says:

    THANK YOU SO MUCH!!!! I tried a bunch of other tutorials but to no avail. I tried this one and it worked like a charm!

    Keep up the great work!

    1. Anupam says:

      Glad to hear that Tim. If you want me to cover any topics feel free to comment below!

  11. Surendra Bharathi says:

    Nice article..If i want to perform operations on each view like clickOnListener on Button where should i write the java code for it.I am novice for Android development .Please help me out

  12. atefeh says:

    thanks …

  13. Ras says:

    Very helpful. But how i add more views(more than three). Please help me. I am a novice in android development.

    1. Ras says:

      I got it. Thanks for your article.

  14. Richard says:

    Thank you! Really nice! Look at this library – https://github.com/Cleveroad/SlidingTutorial-Android

  15. Dennis says:

    How do i add activity to each fragment in the view pager?

    1. Anupam says:

      You can add a fragment to an Activity. Doesn’t work the other way, Dennis!

    2. piyush kumar says:

      import android.os.Bundle;
      import android.support.v4.app.Fragment;
      import android.support.v4.app.FragmentActivity;
      import android.support.v4.app.FragmentManager;
      import android.support.v4.app.FragmentPagerAdapter;
      import android.support.v4.view.ViewPager;

      public class MainActivity extends FragmentActivity {

      @Override
      protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);

      ViewPager pager = (ViewPager) findViewById(R.id.viewPager);
      pager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));
      }

      private class MyPagerAdapter extends FragmentPagerAdapter {

      public MyPagerAdapter(FragmentManager fm) {
      super(fm);
      }

      @Override
      public Fragment getItem(int pos) {
      switch(pos) {

      case 0: return FirstFragment.newInstance(“FirstFragment, Instance 1”);
      case 1: return SecondFragment.newInstance(“SecondFragment, Instance 1”);
      case 2: return ThirdFragment.newInstance(“ThirdFragment, Instance 1”);
      case 3: return ThirdFragment.newInstance(“ThirdFragment, Instance 2”);
      case 4: return ThirdFragment.newInstance(“ThirdFragment, Instance 3”);
      default: return ThirdFragment.newInstance(“ThirdFragment, Default”);
      }
      }

      @Override
      public int getCount() {
      return 5;
      }
      }
      }

  16. Diwas poudel says:

    plz provide me the tutorial related to android animation …. whole relative layout should be scrolled up when the button is click. and the button should also be present in same relative layout..

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages