Introduction of androidX ViewPager2

The lesser the text, the better the experience. But delivering the content is equally important. Why dump all the words in one page when you can split it into pages and acme them with a swipe?

View pager supports this and ensures to deliver more content by separating them into pages. The previous version of Android, supported only left to right and right to left swipes. Now androidX supports viewpager2 which lists the below additional features.

Android Viewpager2 Beta version was launched by Google on August 7, 2019. You can find detailed information about the release here.

New concepts:

The additional features introduced in Android ViewPager2 are listed below

• Right to Left layout support
• Vertical orientation support
• A better PageChangeListener

API changes :

Android ViewPager2 has been updated with some improvements, such as

• RecylerView.Adapter replaces PagerAdapter
• FragementStateAdapter replaces FragementStatePagerAdapter
• RegisterOnPageChangeCallback replaces addPageChangeListener

ViewPager2 is included for AndroidX, if this has to be used in your project then the project must be migrated to AndroidX and minSdkVersion should be 14 or higher.

For example,

Gradle Dependency:

Add the following dependency to your app build.gradle.

dependencies { 

    implementation 'androidx.viewpager2:viewpager2:1.0.0-beta03'
}

Setup ViewPager2:

Adding android viewPager2 widget to your XML file
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:background="@color/colorPrimaryDark"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/view_pager"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Lets create layouts on viewpager2:

We need to create the adapter for viewPager2. This is the best part of RecylerView.Adapter and the sample code follows

class CountryPagerAdapter(private val countryStrings: Array<String>) : RecyclerView.Adapter<CountryViewHolder>() {
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): CountryViewHolder {
        return CountryViewHolder(
            LayoutInflater.from(parent.context).inflate(
                R.layout.country_list_item,
                parent,
                false
            )
        )
    }

    override fun onBindViewHolder(holder: CountryViewHolder, position: Int) {
        holder.countryName.text = countryStrings[position]
    }

    override fun getItemCount() = countryStrings.size
}


RecyclerView.ViewHolder

class CountryViewHolder(view: View) : RecyclerView.ViewHolder(view) {

    val countryName: TextView = view.findViewById(R.id.country_name)
}

To create adapter for Viewpager2, an instance of RecylerView adapter has to be created

viewPager.adapter = CountryPagerAdapter(Country.countryStrings)

We can set the orientation for vertical scrolling

viewPager.orientation = ViewPager2.ORIENTATION_VERTICAL

You can find the sample application here for reference.

From this blog, we got to know the benefits of preferring viewpager2. As days go by, the android version we are using will soon be outdated and updating ourselves to the changing trend is much more important to keep us in the track. We shall see the further updates in the future blogs.

– Manikandan K,
Android Team,
Mallow Technologies.