ViewPager2 in Android: Getting Started

Using TabsLayoutMediator

Now, here comes the tricky part. To link the TabLayout and ViewPager2, you have to use TabLayoutMediator. This synchronizes the ViewPager and TabLayout to change the position when one gets clicked or swiped.

Take a look at its documentation to learn more about it.

Open MainActivity.kt and comment out the line that sets the orientation to vertical, as it’ll look better to use horizontal swiping with tabs. Add the following import statement in MainActivity:

import com.google.android.material.tabs.TabLayoutMediator

Next, add the following code under TODO:10:

TabLayoutMediator(tabLayout, doppelgangerViewPager) { tab, position ->
  //To get the first name of doppelganger celebrities
  tab.text = doppelgangerNamesArray[position].split(" ")[0]
}.attach()

Now, if you look at the constructor of TabLayoutMediator, you’ll understand what’s happening in the above code. This is how it looks:

public TabLayoutMediator(
  @NonNull TabLayout tabLayout,
  @NonNull ViewPager2 viewPager,
  @NonNull TabConfigurationStrategy tabConfigurationStrategy) {
  this(tabLayout, viewPager, true, tabConfigurationStrategy);
}

It expects three parameters. These are a TabLayout, a ViewPager2 and an interface called TabConfigurationStrategy, which looks like this:

/**
* A callback interface that must be implemented to set the text and styling of newly created
* tabs.
*/
public interface TabConfigurationStrategy {
  /**
   * Called to configure the tab for the page at the specified position. Typically calls {@link
   * TabLayout.Tab#setText(CharSequence)}, but any form of styling can be applied.
   *
   * @param tab The Tab which should be configured to represent the title of the item at the given
   *     position in the data set.
   * @param position The position of the item within the adapter's data set.
   */
  void onConfigureTab(@NonNull TabLayout.Tab tab, int position);
}

Thanks to the beloved Kotlin syntax, if the last parameter to a function is a function, or, in this case, a functional interface, and you’re passing a lambda expression, you can specify it outside the parentheses.

onConfigureTab is called for each item in the adapter when they are populated. The above code sets the text for each of the tabs with the first name of each doppelganger.

The important thing to notice is attach(). This method links the functionalities of ViewPager2 and TabLayout together.

Build and run the app. You’ll see the tabs working now.

Trying the RTL Support

RTL stands for right-to-left. In languages like Arabic, where words go from right to left, it’s essential you take measures to ensure your app doesn’t break. Supporting RTL in ViewPager isn’t easy.

However, ViewPager2 comes with RTL support. To try it, you can either force your entire device to RTL mode from Settings or write some Kotlin code to force the tabs and ViewPager2. You’ll try the latter approach.

Add the following import statement in MainActivity:

import android.view.View

Copy the following code below TODO:11:

doppelgangerViewPager.layoutDirection = ViewPager2.LAYOUT_DIRECTION_RTL
tabLayout.layoutDirection = View.LAYOUT_DIRECTION_RTL

The code above forces the layout direction of both widgets to RTL. Build and run the app to see the change.

Where to Go From Here?

You can download the final project using the Download Materials button at the top or bottom of this tutorial.

In this tutorial, you learned to use ViewPager2 with Fragments to display animal doppelgangers, connected a TabLayout to it and saw how easy it is to add vertical scrolling and RTL support.

If you want to learn more about ViewPager2, check out this official guide, which shows you how to create custom animations between your pages. You can also take a look at the documentation of the class itself.

If you have any questions or comments, please join the discussion below!