Android ViewPager2 With Examples

It’s been hardly a week since Google has released the new ViewPager2’s alpha version. We’re here with our very own introduction to ViewPager2 through a sample Android Application.

ViewPager has been an important component of the UI since a long while. Still, it always gives chills to developers when they try to implement certain features. Features such as updating Fragment content, swiping right to left and swiping vertical require a lot of effort.

Things like these have brought ViewPager2 into the scene. Let’s see what it has in store for us.

Android ViewPager2

In order to use ViewPager2 in your application add the following dependency in the build.gradle.

Android ViewPager2 Features

Following are the features that ViewPager2 brings to the table:

  • Right to Left Layout Support
  • Vertical Orientation
  • Use of RecyclerView implicitly
  • Shift from PagerAdapter to RecyclerView.Adapter
  • Better control of Animation on Page change thanks to RecyclerView
  • A Smarter Page Change Listener
  • A working notifyDataSetChanged

In order to add ViewPager2 in your layout add the following snippet:

In the older ViewPager’s addOnPageChangeListener method callback interface, OnPageChangeListener, we had to override all three methods. In ViewPager2 it is no longer necessary, thus preventing boilerplate code.

If you check the implementation of ViewPager2, it uses RecyclerView within. Thus if you’ve implemented RecyclerView, implementing ViewPager2 wouldn’t be much different.

You can use fragments inside ViewPager2 as well as we did in ViewPager.

You just need to use FragmentStateAdapter instead of FragmentStatePagerAdapter.

In order to register a Listener on ViewPager2, we need to do the following:

Note: You can override either or all of the methods of the callback.

In the following section, we’ll be implementing ViewPager2 using the RecyclerView.Adapter pattern.
Implementation using FragmentStateAdapter is similar to what we did in ViewPager 1

Android ViewPager2 Example Project Structure

android-viewpager2-project-structure

 

Android Viewpager2 Example Project Structure

Code

Coming to the code, we’ve used androidx packaging system.

The code for the activity_main.xml file is given below:

The code for the MainActivity.java class is given below:

Let’s look at the layout for each of the viewpager screens:

The code for the ViewPagerAdapter.java class is given below:

In the above code, we’ve passed the ViewPager2 instance to demonstrate the orientation toggle. On the button click, we change the orientation of the ViewPager2.

The output of the above application in action is given below:

Android Viewpager2 Output

Android Viewpager2 Example App

ViewPager2 has just been released and few known issues such as clipToPadding have been reported. We predict a stable version of ViewPager2 to be out with Android Q this year.

To know the other main issues, visit this link.

That brings an end to this tutorial. You can download the project from the link below:

By admin

Leave a Reply