SoFunction
Updated on 2025-04-07

Detailed explanation of how to create ViewPager components in Android App

Now many apps are opened as a ViewPager, and you can slide it with your fingers. Every time you slide, you can change a picture. There will be circles below to indicate which chapter to slide to now~
Usually these pictures are provided with function introductions or teaching. My needs are very simple, just like the one mentioned above.
There are two ways to do it. One is to find an existing kit. I have checked a lot of information and recommended the ViewPagerIndicator set to me. I have seen this set before, but it seems that it needs fragment and the Google Play example cannot be loaded, so I have to do one by myself.
For the implementation of Viewpager, please refer to the Android ViewPager program code in the detailed explanation:

@Overrideprotected void onCreate(Bundle savedInstanceState) {
  (savedInstanceState);
  setContentView(.activity_intro);

  mViewPager = (ViewPager) findViewById();

  final LayoutInflater mInflater = getLayoutInflater().from(this);

  View v1 = (.intro_layout_1, null);
  View v2 = (.intro_layout_2, null);
  View v3 = (.intro_layout_3, null);
  View v4 = (.intro_layout_4, null);

  viewList = new ArrayList<View>();
  (v1);
  (v2);
  (v3);
  (v4);

  (new MyViewPagerAdapter(viewList));
  (0);}
MyViewPagerAdapter
public class MyViewPagerAdapter extends PagerAdapter {
  private List<View> mListViews;

  public MyViewPagerAdapter(List<View> mListViews) {
     = mListViews;
  }

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


  @Override
  public Object instantiateItem(ViewGroup container, int position) {
    View view = (position);
    (view);
    return view;
  }

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

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

That way you have a ViewPager


Let's take a look at the usage of ViewPager:
1. ViewPager creation steps
① Add to XML layout.

② Load the displayed page card to convert the Layout layout into a View object

  (1) 

LayoutInflater lf getLayoutInflater().from(this);
  (resource,root);

  (2)

(context,resource,root);

③ Configure Adapter (three types of Adapters)

(1)PagerAdapter Data source: List<View>
(2)FragmentPagerAdapter Data source: List<Fragment>
(3)FragmentStatePagerAdapter Data source: List<Fragment>
2. Code examples
Create four new Fragments and their layout below is the XML layout of MainActivity:

&lt;.
    android:
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center" &gt;

    &lt;.
      android:
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="top" &gt;
    &lt;/.&gt;
    &lt;!-- The title at the bottom and the top above cannot appear at the same time
    &lt;.
      android:
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="bottom" &gt;
    &lt;/.&gt;
    --&gt;
  &lt;/.&gt;

The first PagerAdapter

public class MyPagerAdapter extends PagerAdapter {

  private List&lt;View&gt; viewList;
  private List&lt;String&gt; titleList;

  public MyPagerAdapter(List&lt;View&gt; viewList,List&lt;String&gt; titleList){
     = viewList;
     = titleList;
  }

  /**
    * Number of page cards returned
    */
  @Override
  public int getCount() {

    return ();
  }

   /**
    * Whether the view comes from an object
    */
  @Override
  public boolean isViewFromObject(View arg0, Object arg1) {

    return arg0==arg1;
  }
   /**
    * Instantiate a page card
    */
  @Override
  public Object instantiateItem(ViewGroup container, int position) {
    ((position));
    return (position);
  }
   /**
    * Destroy a page card
    */
  @Override
  public void destroyItem(ViewGroup container, int position, Object object) {

    ((position));

  }

  /**
    * Set the title of ViewPager
    */
  @Override
  public CharSequence getPageTitle(int position) {

    return (position);
  }

}

The second type of FragmentPagerAdapter

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
  private List<Fragment> fragList;
  private List<String> titleList;
  public MyFragmentPagerAdapter(FragmentManager fm,List<Fragment> fragList,List<String> titleList) {
    super(fm);
     = fragList;
     = titleList;
  }


  @Override
  public Fragment getItem(int arg0) {

    return (arg0);
  }

  @Override
  public CharSequence getPageTitle(int position) {

    return (position);
  }

  @Override
  public int getCount() {

    return ();
  }

}

The third type of FragmentStatePagerAdapter (this adapter can dynamically destroy Fragment)

public class MyFragmentPagerAdapter2 extends FragmentStatePagerAdapter {//This adapter can be destroyed dynamically  private List&lt;Fragment&gt; fragList;
  private List&lt;String&gt; titleList;
  public MyFragmentPagerAdapter2(FragmentManager fm,List&lt;Fragment&gt; fragList,List&lt;String&gt; titleList) {
    super(fm);
     = fragList;
     = titleList;
  }


  @Override
  public Fragment getItem(int arg0) {

    return (arg0);
  }

  @Override
  public CharSequence getPageTitle(int position) {

    return (position);
  }

  @Override
  public int getCount() {

    return ();
  }

  @Override
  public Object instantiateItem(ViewGroup arg0, int arg1) {

    return (arg0, arg1);
  }
  @Override
  public void destroyItem(ViewGroup container, int position, Object object) {

    (container, position, object);
  }

}

The Activity must inherit the FragmentActivity using getSupportFragmentManager():

public class MainActivity extends FragmentActivity implements OnPageChangeListener{
  private List&lt;View&gt; viewList;
  private List&lt;String&gt; titleList;
  private ViewPager pager;
  private PagerTabStrip tab;//Top title
  private List&lt;Fragment&gt; fragList;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    (savedInstanceState);
    setContentView(.activity_main);
    viewList = new ArrayList&lt;View&gt;();
    titleList = new ArrayList&lt;String&gt;();
    tab = (PagerTabStrip) findViewById();

    View view1 = (this,.view1,null);
    View view2 = (this,.view2,null);
    View view3 = (this,.view3,null);
    View view4 = (this,.view4,null);

    (view1);
    (view2);
    (view3);
    (view4);

    fragList = new ArrayList&lt;Fragment&gt;();
    (new Fragment1());
    (new Fragment2());
    (new Fragment3());
    (new Fragment4());

    // Set the title for the ViewPager page card    ("Page 1");
    ("Page 2");
    ("Page 3");
    ("Page 4");
    //Set some properties for PagerTabStrip    ();
    (false);
    ();

    pager = (ViewPager) findViewById();
    //MyPagerAdapter adapter = new MyPagerAdapter(viewList,titleList);
    //MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), fragList, titleList);
    /**
      * Use getSupportFragmentManager() to inherit the FragmentActivity
      */
    MyFragmentPagerAdapter2 adapter = new MyFragmentPagerAdapter2(getSupportFragmentManager(), fragList, titleList);
    (adapter);
    (this);
  }

  @Override
  public void onPageScrollStateChanged(int arg0) {

  }

  @Override
  public void onPageScrolled(int arg0, float arg1, int arg2) {

  }

  @Override
  public void onPageSelected(int arg0) {
    (this,"It's currently the first"+(arg0+1)+"Personal Interface", 0).show();

  }

}