Android: Simple Example of Page Transition Using ViewPager

The ViewPager class built in to the Android SDK is a simple method of showing an animated transition between two views. For example, turning a page, or a calendar scrolling through months. This functionality can be added with only a few lines of code. Below I present an example containing pretty much the bare minimum of code and markup required to get a ViewPager up and running.

The steps are fairly straight foreward:

• Edit your Activity’s layout to include a “ViewPager”. As in activity_main.xml below.
• Define the layout for your “pages”. This will be a new .xml file containing a layout just like you define for an activity (pageritemview.xml below).
• Create a new PagerAdapter class (e.g. ViewPagerAdapter below) which implements the display of your layout. There are a handful of methods you must override, but the bulk of the work is done in “instantiateItem()”.
• In your activity’s “onCreate()” method, initialize the viewPager.

One likely question after getting this to work is “Can a ViewPager allow infinite scrolling?”. The simple answer is “No”. But there are some workarounds. There are a few people who have implemented their own ViewPager class modifications, but I haven’t used any of them, so cannot recommend any. The more common workaround is to return a count far higher than a user is likely to ever scroll (e.g. 10,000), and then in your Activity’s onCreate() method call the ViewPager’s setCurrentItem() method to set the current item to be the middle.

Below, I have chosen to just display the current position as a string for a simple example. In reality, you would use the position as an index into an array or a database to look up the information you want to display for a specific item.

MainActivity.java:

import android.app.Activity;
import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;


class ViewPagerAdapter extends PagerAdapter {
    Context context;
    LayoutInflater inflater;

    public ViewPagerAdapter(Context context) {
        this.context=context;
    }

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

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View itemView = inflater.inflate(R.layout.pageritemview, container,
                false);

        /*
        Just as an example, we just display the current position as text.  In reality
         you would use the "position" variable to look up the current item to display
         in an array or a database.
         */
        ((TextView)itemView.findViewById(R.id.someText)).setText(Integer.toString(position));
        container.addView(itemView);

        return itemView;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((LinearLayout) object);
    }

}

public class MainActivity extends Activity {
    ViewPager viewPager;
    PagerAdapter adapter;

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

        viewPager = (ViewPager) findViewById(R.id.pager);
        adapter = new ViewPagerAdapter(MainActivity.this);
        viewPager.setAdapter(adapter);
    }
}

activity_main.xml:

<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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"
    android:orientation="vertical"
    >

    <TextView android:text="@string/hello_world" android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />
</LinearLayout>

pageritemview.xml

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

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/someText"
        android:textSize="50dp"
        android:gravity="center"
        />

</LinearLayout>