ViewPager2 tutorial for Beginners: Android

 In this post you will learn how to implement ViewPager2 in your android app using Java.

What is the use of ViewPager?

Adding a ViewPager to the application UI allow the users to swipe forward and backward between views in the app. eg. A photo gallery app in which the users can swipe the images forward and backward.

Implementing the ViewPager:

First, add the dependency for ViewPager2 in the build.gradle(Module: app) with the latest version:

implementation "androidx.viewpager2:viewpager2:1.0.0"

Now , in the activity_main.xml file, add the following code:

	<?xml version="1.0" encoding="utf-8"?>
	<androidx.constraintlayout.widget.ConstraintLayout 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.viewpager2.widget.ViewPager2
	android:id="@+id/viewPager"
	android:layout_width="match_parent"
	android:layout_height="match_parent"/>
	</androidx.constraintlayout.widget.ConstraintLayout>

view raw xml hosted with ❤ by GitHub

After that, create a new Java class that will be the Model class for the items to be displayed in the view .Add the following code:

	public class SliderItem {
	private int Image;
	public SliderItem(int image) {
	Image = image;
	}
	public int getImage() {
	return Image;
	}
	}

view raw java hosted with ❤ by GitHub

Now create a new layout resource file that will define the structure of individual view of our ViewPager. Add the code to it:

	<?xml version="1.0" encoding="utf-8"?>
	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="match_parent">
	<ImageView
	android:id="@+id/slideImage"
	android:layout_width="350dp"
	android:layout_height="500dp"
	android:layout_centerInParent="true"/>
	</RelativeLayout>

view raw xml hosted with ❤ by GitHub

Once this is done, create another Java class that will be the adapter for our ViewPager. An adapter basically binds the items to the respective views in the app. Add the following code to this class:

	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;
	import androidx.viewpager2.widget.ViewPager2;
	import java.util.List;
	public class Adapter extends RecyclerView.Adapter<Adapter.SliderViewHolder> {
	private List<SliderItem> list;
	private ViewPager2 viewPager2;
	Adapter(List<SliderItem> list, ViewPager2 viewPager2) {
	this.list = list;
	this.viewPager2 = viewPager2;
	}
	@NonNull
	@Override
	public SliderViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
	return new SliderViewHolder(
	LayoutInflater.from(parent.getContext()).inflate(R.layout.item, parent, false));
	}
	@Override
	public void onBindViewHolder(@NonNull SliderViewHolder holder, int position) {
	holder.setImage(list.get(position));
	}
	@Override
	public int getItemCount() {
	return list.size();
	}
	class SliderViewHolder extends RecyclerView.ViewHolder {
	private ImageView imgView;
	public SliderViewHolder(@NonNull View itemView) {
	super(itemView);
	imgView = itemView.findViewById(R.id.slideImage);
	}
	void setImage(SliderItem sitem) {
	imgView.setImageResource(sitem.getImage());
	}
	}
	}

view raw java hosted with ❤ by GitHub

Add a couple of images in the drawable folder to display in the views.After that, in the MainActivity,java class, create the instance of ViewPager, Create a new list and add to it the images that you have added to the drawable folder :

	public class MainActivity extends AppCompatActivity {
	private ViewPager2 vPager2;
	private Handler handler = new Handler();
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	vPager2 = findViewById(R.id.viewPager);
	List<SliderItem> itemList = new ArrayList<>();
	itemList.add(new SliderItem(R.drawable.c001));
	itemList.add(new SliderItem(R.drawable.c002));
	itemList.add(new SliderItem(R.drawable.c003));
	itemList.add(new SliderItem(R.drawable.c004));
	itemList.add(new SliderItem(R.drawable.c005));
	vPager2.setAdapter(new Adapter(itemList, vPager2));
	vPager2.setClipChildren(false);
	vPager2.setClipToPadding(false);
	vPager2.setOffscreenPageLimit(3);
	vPager2.getChildAt(0).setOverScrollMode(RecyclerView.OVER_SCROLL_NEVER);
	CompositePageTransformer pageTransformer = new CompositePageTransformer();
	pageTransformer.addTransformer(new MarginPageTransformer(40));
	pageTransformer.addTransformer(new ViewPager2.PageTransformer() {
	@Override
	public void transformPage(@NonNull View page, float position) {
	float r = 1 - Math.abs(position);
	page.setScaleY(0.85f + r * 0.15f);
	}
	});
	vPager2.setPageTransformer(pageTransformer);
	}
	}

view raw java hosted with ❤ by GitHub

And there you go... You have successfully implemented the ViewPager in your app. 

Output: