ViewPager2

At the Google I/O 2019 ViewPager2 was announced, a large step forward compared the the good old ViewPager. This tutorial goes about ViewPager2, so we are going to skip an introduction about ViewPager and in which use cases you should use it!. ViewPager2 is part of the AndroidX JetPack library, more information about AndroidX can in this tutorial.

Why use a ViewPager2?

When we want to manage multiple screens through swiping for example within TabLayout or to navigate from item A to item B. One of the biggest benefits of the ViewPager2 is that it uses the RecyclerView, one of the most used layouts in Android. By using the RecyclerView we get for support for or right-to-left (RTL), improved performing, support of DiffUtil.


Within ViewPager2 you are no longer forced to use Fragments, There is still an option to use fragments with the FragmentStateAdapter but we won't dive into that part.

We are focussing on a ViewPager2 with RecyclerView and ListAdapter. If you are unfamiliar with the renewed ListAdapter check here for more information.

How to implement a ViewPager2?

The ViewPager is part of the AndroidX Jetpack packages, so the first step is to update the build.gradle file androidx.viewpager2:viewpager2:x.y.z

Update a layout with the widget androidx.viewpager2.widget.ViewPager2, for most use cases the width and height are configured as match_parent. As last step is to set an Adapter the the ViewPager2 like an RecyclerView.



With the ViewPager2 implemented, lets focus on the color_item.xml and ColorAdapter, which extends ListAdapter. The ColorAdapter contains the same logic as a generic RecyclerView adapter, for readability we've added the ColorViewHolder inside the ColorAdapter. As layout we are using a simple color_item.xml with a TextView.

Example content

In this example we are using a Color object to show multiple pages inside the ViewPager. In order to implement all features for a ListAdapter also the DIFF_CALLBACK is included within Color.java.

ViewPager2 extras

The ViewPager2 supports a ViewPager2.OnPageChangeCallback in order to keep the activity updated about any page transitions. With an easy registerOnPageChangeCallback you can registern on events. Important to also call unregisterOnPageChangeCallback() when you are no longer interested in the callback events.

ViewPager2.OnPageChangeCallback

• onPageScrollStateChanged(): Called the scroll state changes, there are tree states SCROLL_STATE_IDLE, SCROLL_STATE_DRAGGING and SCROLL_STATE_SETTLING.
• onPageScrolled(): Called when the page is scrolled, through programmatically or user initiated scroll.
• onPageSelected(): Called when a new page is selected, this page is now the most visible page

Another feature is the setCurrentItem(int item), with this feature you are able to selected any page to be shown. If you dont want that the user visually noticed that the ViewPager is scrolled the smoothScroll boolean can be set to false. setCurrentItem (int item, boolean smoothScroll).

ViewPager2 result

With above implementation the result is a simple ViewPager2 with default animation showing multiple pages with a color.

Espresso and ViewPager2

Last but not least some information about how to test a ViewPager2 with Espresso.

As we are using the default RecylerView on the background multiple pages can be drawn, so always create onView matchers with specific elements to verify only one view is found.

For swiping left and right we've can easy use onView(withId(R.id.viewpager2)).perform(swipeLeft());

Links

• ViewPager2 package
• Androidx ViewPager2 reference

With this upgrade to ViewPager2 we've explained the basic ViewPager2, it's up to you to implement this Widget in great apps.

Thank you for reading this article, If you liked the article, help others find this article by sharing it.