Android ViewPager simple Example Tutorial- Sliding Screens

ViewPager is used to for implementing the Screen Slides. Screen slides are transitions between one entire screen to another and are common with UIs like setup wizards or slideshows as shown in the above video.

Steps for implementing ViewPager:
1) A Layout(that contains ViewPager) for the MainActivity.
2) FragmentPagerAdapter/FragmentStatePagerAdapter class which controls the fragments to be shown on page swipes.
3) Fragments to be shown on swiping the screen.

Lets begin by creating a new Android Application project and copy the contents for the activity_main.xml layout file:

step-1)

<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" />

In the above layout file we have created a view called ViewPager which will cover the entire screen for displaying the fragments. You can also put the above ViewPager view inside a RelativeLayout view for adding some other views for the same Activity.

step-2)

Now lets implement the adapter for the ViewPager inside MainActivity.java which will use the activity_main.xml layout as its setContentView.

MainActivity.java:

package com.tutorialsface.example.viewpager;

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

public class MainActivity extends ActionBarActivity {

	ViewPager mViewPager;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		mViewPager = (ViewPager) findViewById(R.id.pager);
/** set the adapter for ViewPager */
		mViewPager.setAdapter(new SamplePagerAdapter(
				getSupportFragmentManager()));
	}

/** Defining a FragmentPagerAdapter class for controlling the fragments to be shown when user swipes on the screen. */
	public class SamplePagerAdapter extends FragmentPagerAdapter {

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

		@Override
		public Fragment getItem(int position) {
      /** Show a Fragment based on the position of the current screen */
			if (position == 0) {
				return new SampleFragment();
			} else
				return new SampleFragmentTwo();
		}

		@Override
		public int getCount() {
			// Show 2 total pages.
			return 2;
		}
	}

}

The above code is self explanatory, so you can read the comments within the code to understand it.
We have used two fragments in the FragmentPagerAdapter for showing two different pages on swiping.
So lets implement two fragments now.
step-3)

SampleFragment.java

package com.tutorialsface.example.viewpager;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class SampleFragment extends Fragment {
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View rootView = inflater.inflate(R.layout.fragment_one, container,
				false);
		return rootView;
	}
}

Layout file for SampleFragment.java :
fragment_one.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"
    android:background="#ff8"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="PAGE1" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="16dp"
        android:text="Tutorial on ViewPager" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="28dp"
        android:text="Tutorials FACE\nwww.tutorialsface.com " />

</RelativeLayout>

Implementation of second fragment:
SampleFragmentTwo.java

package com.tutorialsface.example.viewpager;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class SampleFragmentTwo extends Fragment {
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View rootView = inflater.inflate(R.layout.fragment_two, container,
				false);
		return rootView;
	}
}

Layout file for SampleFragmentTwo.java :
fragment_two.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"
    android:background="#8ff"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">
    
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="PAGE2" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="16dp"
        android:text="Tutorial on ViewPager" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="28dp"
        android:text="Tutorials FACE\nwww.tutorialsface.com " />

</RelativeLayout>

Now run the android application you just created.
The screenshots for the app:

45,341 total views, 5 views today