Skip to main content

ViewPager2 Introduction

ViewPager2 Introduction and Examples.

Introduction to ViewPager2​

ViewPager2 is a library introduced by Google as an updated version of the original ViewPager library. It is a powerful tool for creating swipeable views in your Android app. With ViewPager2, you can easily implement horizontal or vertical scrolling pages, such as image galleries, onboarding screens, or any other multi-page layout.

ViewPager2 provides a number of features and improvements over its predecessor, including better support for handling user input, improved accessibility, and enhanced customization options. It is built on top of the RecyclerView library, which makes it more flexible and efficient.

In this tutorial, we will explore the features of ViewPager2 and learn how to integrate it into your Kotlin Android app.

Features of ViewPager2​

ViewPager2 offers several key features that make it a versatile and user-friendly library. Some of its notable features include:

  • Smooth scrolling: ViewPager2 provides smooth and seamless scrolling between pages, ensuring a great user experience.
  • Horizontal and vertical scrolling: You can choose between horizontal and vertical scrolling orientations, depending on your app's requirements.
  • Page transformations: ViewPager2 allows you to apply animations and transformations to the pages during scrolling, enabling you to create impressive visual effects.
  • Page indicators: You can easily add page indicators, such as dots or tabs, to indicate the current page position to the user.
  • Offscreen page limit: ViewPager2 lets you control the number of offscreen pages to be kept in memory, optimizing memory usage and performance.
  • Data binding support: ViewPager2 seamlessly integrates with data binding, allowing you to bind your data models directly to the views in the pages.
  • Accessibility support: ViewPager2 provides improved accessibility features, making your app more accessible to users with disabilities.

Installation and Setup​

To use ViewPager2 in your Android project, you need to add the necessary dependencies to your app's build.gradle file.

  1. Open your project in Android Studio.
  2. Open the app-level build.gradle file.
  3. Add the following dependencies to the dependencies block:
implementation 'androidx.viewpager2:viewpager2:1.0.0'
  1. Sync your project with Gradle files to download the dependencies.

With the dependencies added, you are now ready to start using ViewPager2 in your app.

Creating a ViewPager2 Layout​

To create a ViewPager2 layout, follow these steps:

  1. Open the XML layout file where you want to add the ViewPager2.
  2. Add the following code to create the ViewPager2 widget:
<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPager2"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
  1. Customize the layout attributes as per your requirements.

Setting up ViewPager2 Adapter​

ViewPager2 requires an adapter to provide the pages to be displayed. You need to create a custom adapter that extends the RecyclerView.Adapter class. Here's how you can set up the adapter:

  1. Create a new Kotlin class for your adapter, e.g., MyPagerAdapter.
  2. Extend the RecyclerView.Adapter class and implement the necessary methods.
class MyPagerAdapter(private val items: List<PageModel>) : RecyclerView.Adapter<MyPagerAdapter.ViewHolder>() {

    // ViewHolder class

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.page_item, parent, false)
        return ViewHolder(view)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val item = items[position]
        // Bind item data to the view
    }

    override fun getItemCount(): Int {
        return items.size
    }

    inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        // ViewHolder components
    }
}
  1. Replace PageModel with the data model for your pages, and page_item with the layout file for each page.

Setting up ViewPager2 in Activity/Fragment​

To set up ViewPager2 in your activity or fragment, follow these steps:

  1. In your activity or fragment class, initialize the ViewPager2 and its adapter:
val viewPager2: ViewPager2 = findViewById(R.id.viewPager2)
val adapter = MyPagerAdapter(items)
viewPager2.adapter = adapter
  1. Replace items with the list of data models for your pages.

That's it! You have successfully set up ViewPager2 in your app. You can now run your app to see the ViewPager2 in action.

ViewPager2 Examples​