ViewPager is often used to connect fragments. It is very convenient to manage the life cycle of each page. Using ViewPager to manage fragments is a standard adapter implementation. The most commonly used implementations are fragmentpager adapter and fragmentstatepager adapter. By adding a ViewPager to the UI, users can swipe left and right to switch to different Fragment pages.
Next, a simple instance will be used to mix ViewPager and Fragment.

We designed three buttons, which are homepage, contact and mine, and created three Fragment pages. You can not only switch the page by sliding left and right, but also switch the page by clicking the button. Let's take a look at the detailed code.

1, Create an Activity named FragmentViewPagerActivity.java and a layout file Activity view pager.xml. The specific code is as follows:

activity_view_pager.xml

<?xml version="1.0" encoding="utf-8"?>
<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=".FragmentViewPagerActivity"
    android:orientation="vertical">
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/fragment_view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/linear">

    </androidx.viewpager.widget.ViewPager>
    <LinearLayout
        android:id="@+id/linear"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal">
        <Button
            android:id="@+id/btn_previous"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="home page"
            android:layout_weight="1">

        </Button>
        <Button
            android:id="@+id/btn_middle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Contacts"
            android:layout_marginLeft="2dp"
            android:layout_marginRight="2dp"
            android:layout_weight="1">

        </Button>
        <Button
            android:id="@+id/btn_next"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="My"
            android:layout_weight="1">

        </Button>


    </LinearLayout>

</RelativeLayout>

FragmentViewPagerActivity .java

package com.example.myapplication;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;
import androidx.fragment.app.FragmentStatePagerAdapter;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class FragmentViewPagerActivity extends AppCompatActivity{
    private ViewPager viewPager;
    private FragmentManager fragmentManager;
    private Button mBtnPrevious;
    private Button mBtnMiddle;
    private Button mBtnNext;


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

        //Initialize 3 buttons, bind the button control of layout file and implement its click event
        mBtnInit();


        //Bind viewPager and get fragmentManager instance
        viewPager = findViewById(R.id.fragment_view_pager);
        fragmentManager = getSupportFragmentManager();


        //Set the start page of the viewPager and the start state of the button
        viewPager.setCurrentItem(0);
        mBtnPrevious.setBackgroundColor(0xFF87F00D);

        //Set the Adapter of the viewPager to get the current Fragment page
        viewPager.setAdapter(new FragmentStatePagerAdapter(fragmentManager) {
            @NonNull
            @Override
            public Fragment getItem(int position) {
                return createFragment(position);
            }

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

        //Set the interface of viewPager to change listening
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }


            @Override
            public void onPageSelected(int position) {

                clearAllBtnStatus();

                switch (position){
                    case 0:
                        mBtnPrevious.setBackgroundColor(0xFF87F00D);
                       break;
                    case 1:
                        mBtnMiddle.setBackgroundColor(0xFF87F00D);
                        break;
                    case 2:
                        mBtnNext.setBackgroundColor(0xFF87F00D);
                        break;
                    default:
                        break;
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });


    }

    //Initialize 3 buttons, bind the button control of layout file and implement its click event
    private void mBtnInit() {

        mBtnPrevious = findViewById(R.id.btn_previous);
        mBtnMiddle = findViewById(R.id.btn_middle);
        mBtnNext = findViewById(R.id.btn_next);

        mBtnPrevious.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                viewPager.setCurrentItem(0);
            }
        });
        mBtnMiddle.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                viewPager.setCurrentItem(1);
            }
        });
        mBtnNext.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                viewPager.setCurrentItem(2);
            }
        });

        clearAllBtnStatus();
    }

    //Used to clear the background color status of the button
    private void clearAllBtnStatus() {

        mBtnPrevious.setBackgroundColor(0xffffffff);
        mBtnMiddle.setBackgroundColor(0xffffffff);
        mBtnNext.setBackgroundColor(0xffffffff);
    }

    //Create different Fragment pages
    private  Fragment createFragment(int position) {

        switch (position){
            case 0:
                return new FragmentOne();
            case 1:
                return new FragmentTwo();
            case 2:
                return new FragmentThree();
            default:
                break;
        }
        return null;
    }


}

2, Three subclasses fragment one.java, fragment two.java, FragmentThree.java of fragment are created respectively, and three pairs of fragment layout files fragment_one.xml, fragment_two.xml, fragment_three.xml are created. The code is as follows:

FragmentOne.java

package com.example.myapplication;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;


import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class FragmentOne extends Fragment {
    private TextView tvPrevious;


    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater,
                             @Nullable ViewGroup container,
                             @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_one,container,false);

        tvPrevious = view.findViewById(R.id.tv_previous);
        return view;
    }
}

fragment_one.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#4CAF50"
    android:orientation="vertical"
    android:gravity="center">
    <TextView
        android:id="@+id/tv_previous"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Home page interface"
        android:textSize="30sp"
        android:textColor="#000000"
        android:gravity="center">

    </TextView>


</LinearLayout>

Note: the fragment two.java, fragment three.java and fragment one.java of this instance are similar to each other, and the fragmenttwo.xml, fragmentthree.xml and fragmentone.xml are similar to each other, which will not be repeated.

Recommended reading:
Android -- Static and dynamic registration of Fragment