ViewPager2

You've probably noticed that application screens are often changed by swiping in a particular direction instead of pressing a specific button. This approach is usually more aesthetically pleasing and understandable for new users. In this topic, you will learn how to use ViewPager2, one of the simplest ways to create this kind of effect in your applications.

What is ViewPager2?

ViewPager2 is an Android Support Library component used to create the simplest transitions between screens in an application. Before ViewPager2 was created, it was necessary to use ViewPager, which was highly complex and less functional than its successor. The main difference is that ViewPager2 provides vertical orientation support.

Using ViewPager2 allows you to:

• Slide between views
• Slide between fragments

You should choose the option that fits with the way you want to construct your pages. The views option is great if all your screens will have the same layout. You can use the fragments option if your screens have different layouts. Fragments also have a richer lifecycle and make it simple to save state.

This topic focuses on utilizing ViewPager2 to slide between views. Using the library to slide between fragments is covered in the "Child Fragments and ViewPager2 with Fragments" topic, which can be read after this one.

How is ViewPager2 used?

Regardless of which ViewPager2 option you choose, some of the steps you need to take are the same. You should start by adding the following line to the build.gradle file (Module: YourProjectName.app) in your project:

dependencies {
    implementation "androidx.viewpager2:viewpager2:1.0.0"
}

Be sure to re-sync the project after adding this line.

Next, add the ViewPager2 widget to the XML layout file. You will use this widget to display your pages. You can find it in the Containers folder of Palette window in Design view:

Alternatively, you can add it manually:

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

To use ViewPager2, you must also create a ViewPagerAdapter. It will be slightly different depending on whether you are using views or fragments, but the Kotlin class is created in the same way:

class YourAdapterName {

}

Next, you need to assign the Adapter in the MainActivity class:

val viewPager2 = findViewById<ViewPager2>(R.id.your_container_id)
val pagerAdapter = YourAdapterName()
viewPager2.adapter = pagerAdapter

If required, you can also change the orientation from horizontal to vertical:

viewPager2.orientation = ViewPager2.ORIENTATION_VERTICAL

Sliding between views

As previously mentioned, you can use ViewPager2 to slide between views when all your screens have a consistent layout. For example, in a basic exercise app where all the pages are alike, only the workout details change. A simplified representation of how this would look is shown below:

As you can see, every page has an identical layout with the same elements — the template was set at the outset, and only the content changes.

Let's make something similar to this example.

You first need to create an item_page.xml file, which will contain the layout of the pages. This file must be located in the res/layout folder along with all other files.

After creating the markup, the next step is to implement the ViewPager2 adapter. You do this in the previously described way and then create the PageViewHolder class. This is the class that you will later use to define all the items from the item_page.xml file.

class YourAdapterName : RecyclerView.Adapter<PageViewHolder>() {

}
class PageViewHolder(iV: View) : RecyclerView.ViewHolder(iV)

Next, the YourAdapterName class is inherited from RecyclerView.Adapter.

The YourAdapterName class must contain three main methods:

• getItemCount() — returns the count of your pages.
• onCreateViewHolder() — inflates the page layout from the item_page.xml file to your ViewHolder.
• onBindViewHolder() — sets the required data for each of the views in your layout.

override fun getItemCount(): Int = //count of your screens 

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): PageViewHolder =
    PageViewHolder(
        LayoutInflater.from(parent.context).inflate(R.layout.item_page, parent, false)
    )

override fun onBindViewHolder(holder: PageViewHolder, position: Int): Unit =
    holder.itemView.run {
        findViewById<TextView>(R.id.textViewTitle).text = "item $position"
        findViewById<Button>(R.id.button).text = "Example button $position"
    }

That's it! Now you should see a result similar to the one shown at the start of this section. Each of the elements on the screen will have text with an item number.

Conclusion

You now know that ViewPager2 can be used to slide between views or fragments, making it possible to swipe from one screen to another. In this topic, you saw how to use ViewPager2 with views. Don't forget that there is an option to change the slide orientation to horizontal, which can be very useful in some cases. Also, remember that you can learn how to utilize this library with fragments by reading the "Child Fragments and ViewPager2 with Fragments" topic.