ViewPager basics

Verification environment

The content of this article has been verified in the following environment.

• Java:8
• Android studio 2.3
• CompileSdkVersion:25
• MinSdkVersion:19
• TargetSdkVersion:25
• BuildToolsVersion:25.0.2

Overview

A view that can be switched using Fragment as a page. Like ListView, ViewPager should be used in combination with Adapter.

A view that inherits this view also allows you to swipe the screen to switch pages and tabs. This time, I will explain the basic usage of ViewPager.

App to create

An app that allows you to switch between self-introduction pages by swiping

Complete image

List of created files

Name page details

The code for the name page looks like this:

• The age page and favorite food page have the same structure, so they are omitted.

Layout file

fragment_name.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:orientation="vertical"
    tools:context="jp.co.casareal.sample.viewpagersample.fragment.NameFragment">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="The first page"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="The name is Casa Real Taro."
        android:textSize="20sp" />

</LinearLayout>

Java source code

NameFragment.java

package jp.co.casareal.sample.viewpagersample.fragment;


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

import jp.co.casareal.sample.viewpagersample.R;

/**
 * A simple {@link Fragment} subclass.
 */
public class NameFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_name, container, false);
    }

}

Adapter details

There are two types of Adapters. "FragmentPagerAdapter" and "FragmentStatePagerAdapter". Since each operation is different, it is necessary to select it according to the application to be created. When the page is switched, "FragmentPagerAdapter" keeps the displayed Fragment in the memory. "FragmentStatePagerAdapter" discards Fragment when the page is switched. Since the number of pages is small this time, I used "FragmentPagerAdapter".

UserInfoViewPagerAdapter.java

package jp.co.casareal.sample.viewpagersample.adapter;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import jp.co.casareal.sample.viewpagersample.fragment.AgeFragment;
import jp.co.casareal.sample.viewpagersample.fragment.FoodFragment;
import jp.co.casareal.sample.viewpagersample.fragment.NameFragment;

/**
 * Created by naoi on 2017/04/24.
 */

public class UserInfoViewPagerAdapter extends FragmentPagerAdapter {
    private static final int PAGE_NUM = 3;

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

    @Override
    public Fragment getItem(int position) {
        Fragment fragment = null;
        switch (position){
            case 0:
                fragment = new NameFragment();
                break;
            case 1:
                fragment = new AgeFragment();
                break;
            default:
                fragment = new FoodFragment();
        }
        return fragment;
    }

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

Details of the Activity that holds the ViewPager

Layout file

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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:orientation="vertical"
    tools:context="jp.co.casareal.sample.viewpagersample.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <Button
            android:onClick="onClickGoToTop"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="To the first page"/>
        <Button
            android:onClick="onClickNext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="to the next page"/>
    </LinearLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

Java source code

The point here is that if you want to change the page with Java source code, you can change it with the setCurrentItem () method of Adapter.

　MainActivity.java

package jp.co.casareal.sample.viewpagersample;

import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

import jp.co.casareal.sample.viewpagersample.adapter.UserInfoViewPagerAdapter;

public class MainActivity extends AppCompatActivity {

    private ViewPager pager;

    private FragmentPagerAdapter adapter;

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

        pager = (ViewPager) findViewById(R.id.pager);

        adapter = new UserInfoViewPagerAdapter(getSupportFragmentManager());
        pager.setAdapter(adapter);
        currentPage = 0;

    }

    public void onClickNext(View view) {
        currentPage ++;
        pager.setCurrentItem(currentPage);
    }

    public void onClickGoToTop(View view) {
        currentPage = 0;
        pager.setCurrentItem(currentPage);
    }
}

reference

https://developer.android.com/reference/android/support/v13/app/FragmentPagerAdapter.html

https://developer.android.com/training/implementing-navigation/lateral.html