ViewPager Tutorial: Getting Started in Kotlin

Adding Tabs

A TabLayout is a nice feature that makes it easy to explore and switch between pages. The TabLayout contains a tab for each page, which usually displays the page title. The user can tap on a tab to navigate directly to the desired page or can use a swipe gesture over the TabLayout to switch between pages.

If you try to add a TabLayout to your ViewPager you won’t be able to see any tabs because the layout will be automatically populated with as many tabs as the FragmentStatePagerAdapter tells it by calling the getCount() method, which now returns a pretty large number. Trying to fit that many tabs on your screen will make them really narrow.

Luckily, there is a third party library called RecyclerTabLayout that solves this problem. The library uses the RecyclerView in its implementation. You can learn more about the mysterious RecyclerView from this tutorial. To install the library, open up build.grade (Module: app) and add the following line inside dependencies:

implementation 'com.nshmura:recyclertablayout:1.5.0'

The recyclertablayout library uses an old version of the Android Support Libraries, so you’ll need to add the following to make the Gradle sync happy:

implementation 'com.android.support:recyclerview-v7:26.1.0'

Tap Sync Now on the yellow pop-up and wait until Android Studio installs the library.

Open activity_main.xml and paste the following snippet above the ViewPager:

<com.nshmura.recyclertablayout.RecyclerTabLayout
    android:id="@+id/recyclerTabLayout"
    android:layout_height="@dimen/tabs_height"
    android:layout_width="match_parent" />

Now add the following property to your ViewPager to align it below the RecyclerTabLayout:

android:layout_below="@id/recyclerTabLayout"

Your whole layout file should now look like this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_height="match_parent"
                android:layout_width="match_parent"
                tools:context="com.raywenderlich.favoritemovies.MainActivity">

  <com.nshmura.recyclertablayout.RecyclerTabLayout
      android:id="@+id/recyclerTabLayout"
      android:layout_height="@dimen/tabs_height"
      android:layout_width="match_parent" />

  <android.support.v4.view.ViewPager
      android:id="@+id/viewPager"
      android:layout_below="@id/recyclerTabLayout"
      android:layout_height="match_parent"
      android:layout_width="match_parent" />

</RelativeLayout>

Open MainActivity.kt and import RecyclerTabLayout at the top of the file, like this:

import com.nshmura.recyclertablayout.RecyclerTabLayout

Now add the following at the top of the class to declare a RecyclerTabLayout instance:

private lateinit var recyclerTabLayout: RecyclerTabLayout

Add this block of code inside onCreate(), above the line where you set viewPager.currentItem:

recyclerTabLayout = findViewById(R.id.recyclerTabLayout)
recyclerTabLayout.setUpWithViewPager(viewPager)

The first line connects your RecyclerTabLayout instance to the xml view and the second one links the RecyclerTabLayout to your ViewPager.

The last thing you have to do is let the RecyclerTabLayout know what titles to display on the Tabs. Open MoviesPagerAdapter.kt and add the following method inside the class:

override fun getPageTitle(position: Int): CharSequence {
  return movies[position % movies.size].title
}

This method tells the TabLayout what to write on the tab placed at a particular position. It returns the title of the movie that corresponds with the fragment created inside getItem(position: Int).

Run the app. You should be able to see the tabs changing as you swipe through the pages. Try tapping on a tab and see how the ViewPager will scroll automatically to the corresponding movie :].

Where to Go From Here?

You can download the final project for this tutorial here.

Nice job! You’ve modified an app and gave it a nicer UI with the help of ViewPager. You’ve also added a pretty cool TabLayout and implemented the endless scroll. In addition, you learned about the PagerAdapter and had to choose which of the FragmentPagerAdapter and FragmentStatePagerAdapter is best for you application. 

If you want to read more about the ViewPager have a look at the documentation. You can try and customize the transition animation with the help of PageTransformer. Check out this tutorial for that.

Bonus challenge: You can implement dot indicators for your pages as seen in many onboarding flows. Here you can find a nice way of creating dot indicators. Note that this solution won’t work with your final ViewPager from this tutorial as it needs PagerAdapter‘s getCount() method to return the exact number of pages. You can try implementing the indicators instead of the endless scroll. This time try using the default TabLayout instead of the third party library. You can download the solution here.

Feel free to join the forum discussion below if you have any comments or questions! :]