ViewPager2: Android Studio

ViewPager2 is a advanced version of ViewPager. ViewPager allows screen transition from one entire screen to another. ViewPager2 also makes vertical transition along with horizontal transition. To use the ViewPager2 following dependency implementation “androidx.viewpager2:viewpager2:1.0.0” should be implemented in build.gradle(:app).

The following code shows viewPager2 in a RelativeLayout, “activity_main.xml” XML file.

<?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:id="@+id/parent_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"/>

</RelativeLayout>

The following code “item_page.xml” gives a swappable image view in a XML file.

<?xml version="1.0" encoding="utf-8"?>
<ImageView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id ="@+id/img_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:adjustViewBounds="true"
    android:scaleType="centerCrop">

</ImageView>

A RecyclerView adapter “MyViewPageAdapter.java” is created for the swappable images.

package com.example.view_pager2;

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;

public class MyViewPageAdapter extends RecyclerView.Adapter<MyViewPageAdapter.ViewHolder> {

    int [] images;

    public MyViewPageAdapter(int[] images){
        this.images = images;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {

        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_page,parent,false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {

        holder.imageView.setBackgroundResource(images[position]);

    }

    @Override
    public int getItemCount() {

        return images.length;
    }

    public class ViewHolder extends RecyclerView.ViewHolder {

        ImageView imageView;
        public ViewHolder(@NonNull View itemView) {
            super(itemView);

            imageView = itemView.findViewById(R.id.img_view);

        }
    }
}

RecylerView adapter “MyViewPageAdapter.java” is used for ViewPager2 adapter and it is set to the ViewPager in MainActivity.java.

package com.example.view_pager2;

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    ViewPager2 viewPager2;
    int [] images = {R.drawable.ic_baseline_person_24,R.drawable.ic_baseline_home_24,
            R.drawable.ic_baseline_local_florist_24,R.drawable.ic_baseline_directions_car_24};

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

        viewPager2 = findViewById(R.id.view_pager);
        adapter = new MyViewPageAdapter(images);
        viewPager2.setAdapter(adapter);

    }
}

output:

Vertical orientation

In order to give horizontal transition orientation should be given “horizontal” in ViewPager2 widget in “activity_main.xml” XML file.

<?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:id="@+id/parent_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"/>

</RelativeLayout>

Output:

Horizontal orientation