如何使 Tablayout 也可滚动

Question

I wrote this code,but the tablayout is not scrollable,instead all the tabs shifting towards left, but view pager is working properly.

When I scroll viewpager,tab items are moving,I want the tabitems should be scrollable with tablayout.

<com.google.android.material.tabs.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorblue"
        app:tabGravity="center"
        android:layout_gravity="center_horizontal"
        app:tabMode="scrollable"
        app:tabIndicatorColor="@color/colorgeydark"
        app:tabSelectedTextColor="@color/colorwhite"
        app:tabTextColor="@color/colorgeydark"
        android:layout_marginTop="5.5dp"
        app:tabBackground="@android:color/transparent"
        app:tabContentStart="0dp"
        />


    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/tablayout"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

Answer 1

you need to add a TabLayout.TabLayoutOnPageChangeListener to the viewPager and a TabLayout.OnTabSelectedListener to the tabLayout

//kotlin sample

viewPager.addOnPageChangeListener(TabLayout.TabLayoutOnPageChangeListener(tabLayout))
tabLayout.addOnTabSelectedListener(TabLayout.OnTabSelectedListener {
   override fun onTabSelected(tab: TabLayout.Tab) {
      //here the view pager will change
      viewPager.setCurrentItem(tab.position, false)
   }

   override fun onTabUnselected(tab: TabLayout.Tab) {

   }

   override fun onTabReselected(tab: TabLayout.Tab) {

   }
})

Answer 2

app:tabGravity="center" only works with app:tabMode="fixed" So if you want to make tab scrollable and center aligned then you have to set tab mode to fixed else tab will be left aligned.