TabLayout tabItem tabGravity center not working

Question

It's working fine for more than 5 tabs but when 3 tabs looking not so good.
This is my TabLayout XML Code:

 <android.support.design.widget.TabLayout
            android:gravity="center"
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/search_bar"
            android:fillViewport="false"
            app:tabGravity="center"
            app:tabIndicatorColor="@color/ThemeColor"
            app:tabIndicatorHeight="6dp"
            app:tabMode="scrollable"
            android:paddingBottom="2dp"
            android:background="@drawable/bottom_dotted_border"
            app:tabSelectedTextColor="@color/ThemeColor"
            app:tabTextAppearance="@style/TabLayoutTextStyle"
            app:tabTextColor="@color/White" />

problamatic tab desire tab

https://stackoverflow.com/questions/43588653/tablayout-gravity-center-is-not-working — IntelliJ Amiya, Aug 29 '17 at 06:28
https://stackoverflow.com/questions/30843775/tab-not-taking-full-width-on-tablet-device-using-android-support-design-widget/39018131#39018131 — Ram Prakash Bhat, Aug 29 '17 at 06:31
This solution is not correct cause I want to fill the width with the added item of the tab . — Md Aslam Hossin, Aug 29 '17 at 06:48

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

just change this app:tabMode="scrollable" to app:tabMode="fixed" in youor tab layout

1. app:tabMode="fixed : the tabs are fixed in your tab layout (its not good for when your tabs have long tabtitles)

2. tabMode:scrollable - you can scroll your tabs horizontally when your tabs have long tabtitles

sample code

<android.support.design.widget.TabLayout
        android:gravity="center"
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/search_bar"
        android:fillViewport="false"
        app:tabGravity="fill"
        app:tabMode="fixed"
        app:tabIndicatorColor="@color/ThemeColor"
        app:tabIndicatorHeight="6dp"
        android:paddingBottom="2dp"
        android:background="@drawable/bottom_dotted_border"
        app:tabSelectedTextColor="@color/ThemeColor"
        app:tabTextAppearance="@style/TabLayoutTextStyle"
        app:tabTextColor="@color/White" />

@MdAslamHossin check updated ans use `app:tabGravity="fill"` — AskNilesh, Aug 29 '17 at 07:29

score 0 · Answer 2 · edited May 03 '21 at 06:22

0

If you use tabMode:scrollable just fix the android:layout_width="match_parent" to "wrap_content"

edited May 03 '21 at 06:22

Muhammad Dyas Yaskur

6,914
10
48
73

answered May 03 '21 at 05:37

axadulin

1

TabLayout tabItem tabGravity center not working

2 Answers2