ViewPager with PageNumbers Example in Android

ViewPager is a Layout manager that allows the user to flip left and right through pages of data.
You supply an implementation of a PagerAdapter to generate the pages that the view shows.

Here we can see how to add page numbers in to a ViewPager.
This Example create 6 pages and show pagenumbers in Textview.

UI layout(pages.xml)

This layout is used to show pagenumber in ViewPager.

<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:id="@+id/rel" >

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

</RelativeLayout>

UI layout(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" >

    <RelativeLayout
        android:id="@+id/relativeTextview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_below="@+id/header"
        android:padding="5dp" >

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

</RelativeLayout>


Android Activity (ViewPagerAdapter.java)

This calss supply an implementation of a PagerAdapter to generate the pages that the view shows

package com.androidsurya.androidviewpager;

import android.app.Activity;
import android.content.Context;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

public class ViewPagerAdapter extends PagerAdapter {
    int size;
    Activity act;
    View layout;
    TextView pagenumber;
    Button click;

    public ViewPagerAdapter(MainActivity mainActivity, int noofsize) {
        // TODO Auto-generated constructor stub
        size = noofsize;
        act = mainActivity;
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return size;
    }

    @Override
    public Object instantiateItem(View container, int position) {
        // TODO Auto-generated method stub
        LayoutInflater inflater = (LayoutInflater) act
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        layout = inflater.inflate(R.layout.pages, null);
        pagenumber = (TextView) layout.findViewById(R.id.pagenumber);
        int pagenumberTxt=position + 1;
        pagenumber.setText("Now your in Page No  " +pagenumberTxt );
        ((ViewPager) container).addView(layout, 0);
        return layout;
    }

    @Override
    public void destroyItem(View arg0, int arg1, Object arg2) {
        ((ViewPager) arg0).removeView((View) arg2);
    }

    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        return arg0 == ((View) arg1);
    }

    @Override
    public Parcelable saveState() {
        return null;
    }

    // }

}

Android Activity (MainActivity.java)

Here in MainActivity we are creating object to ViewPagerAdapter class
and set Adapter to ViewPager object using setAdapter method.

package com.androidsurya.androidviewpager;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.view.Menu;

public class MainActivity extends Activity {
   
          int noofsize = 6;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ViewPagerAdapter adapter = new ViewPagerAdapter(MainActivity.this,
                noofsize);
        ViewPager myPager = (ViewPager) findViewById(R.id.reviewpager);
        myPager.setAdapter(adapter);
        myPager.setCurrentItem(0);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }

}

Register the Activity in AndroidManifest file

  <activity
            android:name="com.androidsurya.androidviewpager.MainActivity"
            android:label="@string/app_name" >

Output Screenshots

For More information about ViewPager: Android Developers site