How to work with ViewPager2

Not so much time has passed since February 7, 2019, Google released the alpha version of Android ViewPager2 . More information about this release can be found here . And now let's see what ViewPager2 is.

New features

• Right-to-left layout support
• Support vertical orientation
• Improved PageChangeListener .

What changed?

• PagerAdapter is replaced by RecyclerView.Adapter ,
• FragmentStatePagerAdapter replaced by FragmentStateAdapter.

ViewPager2 is released for Android X, so if you want to use it, your project must use Android X. Let's see how we can use this new ViewPager2.

Add dependency

Add the following dependency to the application level build.gradle file:

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

After that synchronize your project.

Customization

Add a ViewPager2 widget to your Activity or snippet:

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

Let's create a layout for the page that will be displayed in ViewPager2:

item_page.xml

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent"> <androidx.appcompat.widget.AppCompatTextView android:id="@+id/tvTitle" android:textColor="@android:color/white" android:layout_width="wrap_content" android:layout_centerInParent="true" tools:text= "item" android:textSize="32sp" android:layout_height="wrap_content" /> </RelativeLayout> 

Next we need to create an Adapter for ViewPager2. This is the most interesting. For this we can use the RecyclerView.Adapter . Isn't that cool?

ViewPagerAdapter.kt

 class ViewPagerAdapter : RecyclerView.Adapter<PagerVH>() { private val colors = intArrayOf( android.R.color.black, android.R.color.holo_red_light, android.R.color.holo_blue_dark, android.R.color.holo_purple ) override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): PagerVH = PagerVH(LayoutInflater.from(parent.context).inflate(R.layout.item_page, parent, false)) override fun getItemCount(): Int = colors.size override fun onBindViewHolder(holder: PagerVH, position: Int) = holder.itemView.run { tvTitle.text = "item $position" container.setBackgroundResource(colors[position]) } } class PagerVH(itemView: View) : RecyclerView.ViewHolder(itemView) 

This is the same adapter that we use for normal RecyclerView, and with ViewPager2 it works just as well.

Last step, install the adapter for ViewPager2:

 class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) viewPager2.adapter = ViewPagerAdapter() } } 

That's all! We get the same result as when using the old ViewPager with the PagerAdapter:

Vertical scrolling

Previously, it was necessary to use third-party libraries to implement vertical scrolling, since So far, Google has not provided such an opportunity out of the box. This new ViewPager2 now has support for vertical scrolling. Simply change the orientation in ViewPager2 and vertical scrolling will be enabled. Very simple!

 viewPager2.orientation = ViewPager2.ORIENTATION_VERTICAL 

Here is what comes out of it:

Using the FragmentStateAdapter

You can also use snippets as pages, just like in the old ViewPager. For this there is a FragmentStateAdapter. Let's see how we can use it.

First of all, we need to create a fragment:

 class PagerFragment : Fragment() { override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? { return inflater.inflate(R.layout.item_page, container, false) } override fun onViewCreated(view: View, savedInstanceState: Bundle?) { arguments?.let { container.setBackgroundResource(it.getInt("color")) tvTitle.text = "Item ${it.getInt("position")}" } } } 

Now we will create an adapter for ViewPager2. In its constructor, we pass the FragmentManager, which will manage the fragments:

 class ViewPagerFragmentStateAdapter(fm: FragmentManager) : FragmentStateAdapter(fm) { private val colors = intArrayOf( android.R.color.black, android.R.color.holo_red_light, android.R.color.holo_blue_dark, android.R.color.holo_purple ) override fun getItem(position: Int): Fragment = PagerFragment().apply { arguments = bundleOf( "color" to colors[position], "position" to position ) } override fun getItemCount(): Int = colors.size } 

Now install this new adapter in ViewPager2, and everything is ready:

 viewPager2.adapter = ViewPagerFragmentStateAdapter(supportFragmentManager) 

Improved OnPageChangeCallback

In the old ViewPager, the OnPageChangeListner interface was designed to receive page change / scroll events. And it was very uncomfortable, because we needed to override all three methods ( onPageScrollStateChanged , onPageScrolled , onPageSelected ), even if we didn’t want it.

 oldViewPager.addOnPageChangeListener(object:ViewPager.OnPageChangeListener{ override fun onPageScrollStateChanged(state: Int) { //   } override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) { //   } override fun onPageSelected(position: Int) { // ,    } }) 

Now we have OnPageChangeCallback , an abstract class with non abstract methods. Which literally means that we do not need to redefine all these methods, we can simply redefine those that we need or that we want to use. So, for example, we can track page change events:

 viewPager2.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() { override fun onPageSelected(position: Int) { super.onPageSelected(position) //    } }) 

Attention!

Since ViewPager2 is in alpha version, there are some features of the old ViewPager that have not yet been implemented or do not work properly in this version.

Known issues according to documentation:

• ClipToPadding,
• There is no integration with TabLayout,
• There is no off screen control,
• Cannot set page width (100% by default)

More information about known issues is here . I hope that all this will be fixed in the next updates. I look forward to a stable version of this new ViewPager2. Until then, good code for everyone!