ViewPager2 in Android with Example - GeeksforGeeks

15 May, 2021
Before going to Viewpager2 let us know about Viewpager. Most of you have used WhatsApp, when you open WhatsApp you can see at the top, there are four sections Camera, Chats, Status, Calls these are the Viewpager. So a Viewpager is an android widget that is used to navigate from one page to another page by swiping left or right using the same activity. So when we use Viewpager, we can add different layouts in one activity and this can be done by using the fragments. Famous applications like WhatsApp, Snapchat uses Viewpager.
Viewpager2 is an updated or enhanced version of Viewpager released by Google on 7th Feb 2009. It comes with a variety of new features. The most important feature of viewpager2 that is not present in Viewpager is, the Recyclerview which makes Viewpager2 more efficient than Viewpager. By using the Recyclerview, we can add items dynamically. If you know how to implement a RecyclerView then you can easily implement ViewPager2.
It uses Recyclerview implicitly and is the most important feature.
Supports Right to Left layout.
Supports Vertical orientation.
CompositePageTransformer is introduced to combine multiple page  transformers
notifyDataSetChanged() fully functional.
View Group: Just like ViewPager the ViewPager2 extends from the ViewGroup. A ViewGroup is a view that can contain other views. It is a subclass of the View class. It is the base class for the layouts, like LinearLayout, RelativeLayout, etc.
LayoutManager: The LayoutManager is the same that you have been used in RecyclerView. The LayoutManager is managed by the Viewpager and it manages the views and is used to set the orientation of the ViewPager2.
RecyclerView: The Recyclerview is used to handle to components provided to it. It will show the data to the user that is assigned to it and makes ViewPager2 more efficient.  
onPageScrolled(): This method is triggered when there is any scrolling activity for the current page.
onPageSelected(): triggered when you select a new page.
onPageScrollStateChanged(): triggered when there is scroll state will be changed.
Setting Orientation
By default the orientation of viewpager2 is Horizontal. We can set the orientation of viewpager2 to Vertical by calling the setOrientation() method and passing ORIENTATION_VERTICAL to it. For Horizontal Orientation use 
YourViewPager2Object.orientation = ViewPager2.ORIENTATION_VERTICAL 
To use ViewPager2, you have to first add the dependency in your Build.gradle file:
To do this. Go to app > Gradle Scripts > build.gradle (Module: app) and then write the following dependency ” implementation ‘androidx.viewpager2:viewpager2:1.0.0’ ” into dependencies section as shown below and then click on Sync now.
dependencies {
      implementation 'androidx.viewpager2:viewpager2:1.0.0'
}
After doing all these steps let’s now build an application. So we are going to build the below application. 
Step 1: Create a New Project
On the Welcome screen of Android Studio, click on Create New Project. If you have a project already opened, Go to File > New > New Project. Select a Project Template window, select Empty Activity and click Next. Enter your App Name in the Name field. Select Java from the Language drop-down menu.
Step 2: Add Vector Assets to show on the screen
Go to the app > res > drawable > right-click > new > Vector Asset and select any vector asset of your choice
Step 3: Go to activity_main.xml and add the ViewPager2 widget to it 
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. 
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"    tools:context=".MainActivity">      <androidx.viewpager2.widget.ViewPager2        android:id="@+id/viewpager"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical" />  </LinearLayout>
Step 4: Create a new Layout Resource file 
Go to app > res > layout > right-click > New > Layout Resource File and name that file as “images_holder.xml”. Inside that file insert an ImageView widget and provide an id to it. This layout file will hold our images. Below is the code for the images_holder.xml file. 
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">      <ImageView        android:id="@+id/images"        android:layout_width="match_parent"        android:layout_height="match_parent" />  </LinearLayout>
Step 5: Create an Adapter class
Go to the app > java > right click on first package name  > new > java class name that class as ViewPager2Adapter. An adapter is an important class to work with Recyclerview. Because it contains all the important methods dealing with RecyclerView. Below is the implementation of the Adapter class. For better understanding comments are added inside the code. Below is the code for the ViewPager2Adapter.java file. Comments are added inside the code to understand the code in more detail.
Java
import android.content.Context;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;  import androidx.annotation.NonNull;import androidx.recyclerview.widget.RecyclerView;  class ViewPager2Adapter extends RecyclerView.Adapter<ViewPager2Adapter.ViewHolder> {      // Array of images    // Adding images from drawable folder    private int[] images = {R.drawable.ic_baseline_looks_one_24, R.drawable.ic_baseline_looks_two_24, R.drawable.ic_baseline_looks_3_24,            R.drawable.ic_baseline_looks_4_24, R.drawable.ic_baseline_looks_5_24};    private Context ctx;      // Constructor of our ViewPager2Adapter class    ViewPager2Adapter(Context ctx) {        this.ctx = ctx;    }      // This method returns our layout    @NonNull    @Override     public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {        View view = LayoutInflater.from(ctx).inflate(R.layout.images_holder, parent, false);        return new ViewHolder(view);    }      // This method binds the screen with the view    @Override     public void onBindViewHolder(@NonNull ViewHolder holder, int position) {        // This will set the images in imageview        holder.images.setImageResource(images[position]);    }      // This Method returns the size of the Array    @Override     public int getItemCount() {        return images.length;    }      // The ViewHolder class holds the view    public static class ViewHolder extends RecyclerView.ViewHolder {        ImageView images;          public ViewHolder(@NonNull View itemView) {            super(itemView);            images = itemView.findViewById(R.id.images);        }    }}
Step 6: Working with the MainActivity.java file
Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.
Java
import android.os.Bundle;  import androidx.appcompat.app.AppCompatActivity;import androidx.viewpager2.widget.ViewPager2;  public class MainActivity extends AppCompatActivity {          // Create object of ViewPager2    private ViewPager2 viewPager2;       @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);          // Initializing the viewpager2 object        // It will find the view by its id which        // you have provided into XML file        viewPager2 = findViewById(R.id.viewpager);          // Object of ViewPager2Adapter         // this will passes the         // context to the constructor        // of ViewPager2Adapter        ViewPager2Adapter viewPager2Adapter = new ViewPager2Adapter(this);                  // adding the adapter to viewPager2         // to show the views in recyclerview        viewPager2.setAdapter(viewPager2Adapter);                  // To get swipe event of viewpager2        viewPager2.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {            @Override            // This method is triggered when there is any scrolling activity for the current page            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {                super.onPageScrolled(position, positionOffset, positionOffsetPixels);            }                          // triggered when you select a new page            @Override            public void onPageSelected(int position) {                super.onPageSelected(position);            }              // triggered when there is            // scroll state will be changed            @Override            public void onPageScrollStateChanged(int state) {                super.onPageScrollStateChanged(state);            }        });    }}
Output:
Picked
Android
Java
Java
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Create and Add Data to SQLite Database in Android?
Broadcast Receiver in Android With Example
Resource Raw Folder in Android Studio
Services in Android with Example
Android RecyclerView in Kotlin
Arrays in Java
Split() String method in Java with examples
For-each loop in Java
Object Oriented Programming (OOPs) Concept in Java
Stream In Java