Implement sliding page using ViewPager

android.support.v4.view.ViewPager is a layout manager that allows the user to flip left and right through pages of data.

Example:

ViewPager example

/res/layout/slide_page.xml, layout of individual page.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="lesapplication.blogspot.com" />

    <TextView
        android:id="@+id/pagenumber"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="38sp"
        android:textStyle="bold" />

    <EditText
        android:id="@+id/edit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

SlidePageSupportFragment.java, Fragment share for 0~3th pages.

package com.example.android_viewpager;

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

public class SlidePageSupportFragment extends Fragment {
 //Share by SlidePageSupportFragment 0~3, 
 //and set pageNumber by calling setPageNumber()
 //...NOT always valid
 
 int pageNumber = 0;  //default
 
 public void setPageNumber(int num){
  pageNumber = num;
 }

 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
   Bundle savedInstanceState) {

  ViewGroup rootView = (ViewGroup) inflater.inflate(
                R.layout.slide_page, container, false);
  TextView textPageNumber = (TextView)rootView.findViewById(R.id.pagenumber);
  textPageNumber.setText("Page " + pageNumber);
  
  Toast.makeText(getActivity(), 
    "onCreateView() - Page " + pageNumber, 
    Toast.LENGTH_SHORT).show();
  
        return rootView;
 }

 @Override
 public void onDestroyView() {
  super.onDestroyView();
  
  Toast.makeText(getActivity(), 
    "onDestroyView() - Page " + pageNumber, 
    Toast.LENGTH_SHORT).show();
 }

}

SlidePageSupportFragment4.java, dedicate for 4th page.

package com.example.android_viewpager;

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

public class SlidePageSupportFragment4 extends Fragment {
 //specified for SlidePageSupportFragment4
 //with fixed pageNumber = 4
 
 int pageNumber = 4;

 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
   Bundle savedInstanceState) {

  ViewGroup rootView = (ViewGroup) inflater.inflate(
                R.layout.slide_page, container, false);
  TextView textPageNumber = (TextView)rootView.findViewById(R.id.pagenumber);
  textPageNumber.setText("Page " + pageNumber);
  
  Toast.makeText(getActivity(), 
    "onCreateView() - Page " + pageNumber, 
    Toast.LENGTH_SHORT).show();
  
        return rootView;
 }

 @Override
 public void onDestroyView() {
  super.onDestroyView();
  
  Toast.makeText(getActivity(), 
    "onDestroyView() - Page " + pageNumber, 
    Toast.LENGTH_SHORT).show();
 }

}

/res/layout/activity_main.xml, layout of main activity, with <android.support.v4.view.ViewPager>.

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

MainActivity.java

package com.example.android_viewpager;

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.FragmentStatePagerAdapter;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;

public class MainActivity extends FragmentActivity {

    private static final int NUM_PAGES = 5;

    private ViewPager mPager;
    private PagerAdapter mPagerAdapter;

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

        mPager = (ViewPager) findViewById(R.id.pager);
        mPagerAdapter = new MyFragmentStatePagerAdapter(getSupportFragmentManager());
        mPager.setAdapter(mPagerAdapter);
    }

    @Override
    public void onBackPressed() {
        if (mPager.getCurrentItem() == 0) {
            super.onBackPressed();
        } else {
            mPager.setCurrentItem(mPager.getCurrentItem() - 1);
        }
    }

    private class MyFragmentStatePagerAdapter extends FragmentStatePagerAdapter {
        public MyFragmentStatePagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
         Fragment tmpFragment;
         if(position==4){
          tmpFragment = new SlidePageSupportFragment4();
         }else{
          tmpFragment = new SlidePageSupportFragment();
             ((SlidePageSupportFragment)tmpFragment).setPageNumber(position);
         }
            return tmpFragment;
        }

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

Reference: Using ViewPager for Screen Slides

Tweet