Simple Android ViewPager Example in Android Studio

Android ViewPager Introduction:-

Android ViewPager allows the user to flip left and right through pages of data. In our android application we’ll implement using Fragment and PagerAdapter. that swipes through two fragment views with different images and texts.

in the activity_main.xml in layout directory, add the ViewPager Widget and code look like as below:-

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </androidx.viewpager.widget.ViewPager>

</RelativeLayout>

now create a new layout name as fragment_animals.xml and fill out below code:-

fragment_animals.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textview"
        android:textSize="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center">
      </TextView>

    <ImageView
        android:id="@+id/imageview"
        android:src="@drawable/animals"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </ImageView>

</LinearLayout>

now create a new layout name as fragment_birds.xml and fill out below code:-

fragment_birds.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="20dp"
        android:gravity="center">
    </TextView>

    <ImageView
        android:id="@+id/imageview"
        android:src="@drawable/birds"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </ImageView>

</LinearLayout>

now create a new Java Class name as FragmentAnimals.java, extend with Fragment Class and fill out below code:-.

FragmentAnimals.java

package com.androidcreation.viewpager;


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

import androidx.fragment.app.Fragment;

public class FragmentAnimals extends Fragment {
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
            View v= inflater.inflate(R.layout.fragment_animals, container, false);
            TextView textView=v.findViewById(R.id.textview);
            textView.setText("Animals Fragment");
            return v;
        }
    }

now create another new Java Class name as FragmentBirds.java, extend with Fragment Class and fill out below code:-.

FragmentBirds.java

package com.androidcreation.viewpager;

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

import androidx.fragment.app.Fragment;

public class FragmentBirds extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
        View v= inflater.inflate(R.layout.fragment_birds, container, false);
        TextView textView=v.findViewById(R.id.textview);
        textView.setText("Birds Fragment");
        return v;
    }
}

now create a Adapter class which extends FragmentPageAdapter name as MyPagerAdapter.java, it is used to sliding fragments and fill out below code:-

MyPagerAdapter.java

package com.androidcreation.viewpager;

import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;

import java.util.ArrayList;
import java.util.List;

class MyPagerAdapter extends FragmentPagerAdapter {
    private final List<Fragment> mList = new ArrayList<>();
    private final List<String> mTitleList = new ArrayList<>();
    public MyPagerAdapter(FragmentManager supportFragmentManager) {
        super(supportFragmentManager);
    }
    @Override
    public Fragment getItem(int i) {
        return mList.get(i);
    }
    @Override
    public int getCount() {
        return mList.size();
    }
    public void addFragment(Fragment fragment, String title) {
        mList.add(fragment);
        mTitleList.add(title);
    }
    @Override
    public CharSequence getPageTitle(int position) {
        return mTitleList.get(position);
    }
}

finally in MainActivity put the below code:-

MainActivity.java

package com.androidcreation.viewpager;

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    ViewPager viewPager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager = findViewById(R.id.viewpager);
        MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(new FragmentAnimals(), "Animals");
        adapter.addFragment(new FragmentBirds(), "Birds");
        viewPager.setAdapter(adapter);
    }
}