How can I change the current tab when the corresponding title is selected in the TabLayout?

Question

I'm working on an Android app in Kotlin in which I have a ViewPager and I have a quite simple problem.

How can I change the current tab when the corresponding title is selected in the TabLayout?

Here is my code that configures the ViewPager:

private fun configureViewPager(view: View, context: Context) {
    //Get ViewPager from layout
    val viewPager: ViewPager = view.findViewById(R.id.view_pager)
    //Set Adapter PageAdapter and glue it together
    viewPager.adapter = PageAdapter(context, (activity as AppCompatActivity).supportFragmentManager)
    //Get TabLayout from layout
    val tabs: PagerSlidingTabStrip = view.findViewById(R.id.tabs)
    //Glue TabLayout and ViewPager together
    tabs.setViewPager(viewPager)
}

Note that I use this library to create my TabLayout, but I can revert to the Android TabLayout if the functionality I'm looking for is not supported in the former.

Thanks for your help!

Answer 1

Since the functionality I'm looking for is normally supported natively, I realized that the problem was indeed with my layout. Let me explain: I have an application that contains a navigation drawer. From it, I can access three fragments, one of which contains a TabLayout + ViewPager.

Here is the layout of the fragment that contains a TabLayout + ViewPager:

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

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_constraintTop_toTopOf="parent"
        app:tabIndicatorColor="@color/white"
        app:tabSelectedTextColor="@color/white"/>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:paddingTop="?attr/actionBarSize"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</androidx.constraintlayout.widget.ConstraintLayout>

Indeed, in this layout, the TabLayout was "covering" the ViewPager. By swapping the ViewPager and the TabLayout, I can now move from tab to tab from the TabLayout.

So here is my layout know:

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

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:paddingTop="?attr/actionBarSize"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_constraintTop_toTopOf="parent"
        app:tabIndicatorColor="@color/white"
        app:tabSelectedTextColor="@color/white"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Maybe there are other (better) ways to deal with that issue, please let me know!