ViewPager2 and TabLayout Android Kotlin

Quick & proper implementation of ViewPager2 & Material Tab Layout 🚀

ViewPager 2 Kotlin

Halo readers, Today we will learn about Android ViewPager2 & Material Tab Layout. From styling tab layout to setting up with view pager.

You may have noticed many applications feature with swipe-able screen & playful looking onBoarding Screens like Google Play Store, Pinterest , Slack etc.

Most developers use the ViewPager widget to develop these screens.

On November 20, 2019, Google announced the stable version of ViewPager2, which replaces the old ViewPager and fixes many of its weaknesses.

Lets get started with short introduction,

ViewPager2

We all knew ViewPager aka Swipe-able Screen for Android. ViewPager2 is a latest version of the ViewPager library. With this, views are now recycled more efficiently with smooth custom transitions & low memory usage.

Major features

• RTL (right-to-left) layout support
• Vertical orientation support
• Reliable Fragment support (including handling changes to the underlying Fragment collection)
• Dataset change animations (including DiffUtil support)

Read more if you need migration guide. Here, we will implement from scratch.

Tab Layout

TabLayout provides a horizontal layout to display tabs. We can display a number of layouts in one window to make an identification of those layouts we can use tab layout as an indicator layout.

ViewPager2 is often integrated with TabLayout. A TabLayout indicates the current page and allows a user to switch through pages.

Let’s get started by implementation of material library.

dependencies {
    implementation 'com.google.android.material:material:1.3.0'
}

And In XML design we can add tab layout as.

<com.google.android.material.tabs.TabLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
</com.google.android.material.tabs.TabLayout>

with the attributes of tab layouts like mode, animation & indicators.

app:tabMode="fixed"
app:tabIndicatorAnimationMode="linear"
app:tabIndicatorColor="#EF0C4C"
app:tabIndicatorFullWidth="true"
app:tabIndicatorHeight="2dp"
app:tabSelectedTextColor="#EF0C4C"

Let’s quickly go through some of these useful attributes and their features.

Tab Mode

Fixed tabs

Fixed tabs display all tabs on one screen, with each tab at a fixed width. The width of each tab is determined by dividing the number of tabs by the screen width.

app:tabMode="fixed"

Scrollable tabs

Scrollable tabs are displayed without fixed widths. They are scrollable, such that some tabs will remain off-screen until scrolled.

app:tabMode="scrollable"

Tab Indicator

We can customize the tab indicators with attributes like.

app:tabIndicator="@drawable/custom_tab_indicator"
app:tabIndicatorColor="#EF0C4C"
app:tabIndicatorHeight="2dp"

And If we want to use a custom tab indicator we can create a custom drawable for the indicator with app:tabIndicator. It will take default style if we ignore this attribute.

Tab Indicator Width

app:tabIndicatorFullWidth="false"

Indicator Animation Mode.

app:tabIndicatorAnimationMode="linear | elastic"

Tab TextAppearance

We can style our tab layout title text appearance by creating a style for our tab layout and adding it to our tab layout.

app:tabTextAppearance="@style/SimpleTabText"

And adding a custom style will look like.

<style name="SimpleTabText" parent="TextAppearance.Design.Tab">
    <item name="android:textSize">14sp</item>
    <item name="android:textAllCaps">false</item>
    <item name="textAllCaps">false</item>
</style>

Tab Badge

Adding a badge to tab layout.

private fun setUpBadgeForTabLayout() {
    //set the badge
    val badgeDrawable = badgeTabLayout.getTabAt(0)!!.orCreateBadge
    badgeDrawable.isVisible = true
    badgeDrawable.number = 5
}

Read more about other attributes at Official Documentation

Setting up ViewPager2

Styling is easy, Right. Now, it’s time, we need an adapter & interface for our view pager.

A meme with output.

We can load view pager with fragment & other layout view (like we plot RecyclerView). Let’s implement these two approaches. 🤔

I. ViewPager2 With Fragment

Loading view pager with fragments. Here, we can add fragments that will act with the view pager behavior.

• You can create Fragment inside createFragment
• You can provide list of titles to integrate it with TabLayout size or hardcoded default size.

ViewPagerAdapter.kt

And then to call this Adapter in view as

private fun setUpViewPagerWithTabLayout() {
    val pagerAdapter = ViewPagerAdapter(this, listOfTitles)
    viewPager.adapter = pagerAdapter
}

Done. Our ViewPager with Fragment is read to roll.

II. ViewPager2 Without Fragment

Loading view pager without fragments. I mean there will be such cases where we don’t want to use fragments. Let’s see the example of OnBoarding Screens. (similar to the RecyclerView)

PagerAdapter.kt

And including Adapter in activity/fragment as

private fun setUpPager() {
    val pagerAdapter = PagerAdapter(this,listOfTitles)
    viewPager.adapter = pagerAdapter
}

Done. ViewPager without Fragment is ready to roll.

Integrating ViewPager2 with Tab Layout

Now, we have created an adapter and views for the view pager. The final step is to integrate these two layouts with TabLayoutMediator.

private val listOfTitles = arrayListOf<String>()

private fun loadTitles() {

    listOfTitles.add("Home")
    listOfTitles.add("Profile")
    listOfTitles.add("Notification")
    listOfTitles.add("Activity")
    listOfTitles.add("Timeline")
}
private fun addTabLayoutMediator() {
  TabLayoutMediator(
        tabLayout, viewPager
     ) { tab: TabLayout.Tab, position: Int ->
        tab.text = listOfTitles[position]
     }.attach()
}

where listOfTitles is a tab titles array list.

ViewPager2 with Non-Swipe-able

Just enable/disable swiping in ViewPager2 with true/false.

viewPager2.setUserInputEnabled(false);

Thank you. That’s all for now, Here’s a link to the above output project.

iamnaran/tab-layout-example

Enjoy Your Day..