'TabLayout gravity center is not working

I have a TabLayout, where I want the tabs to be displayed in the center of the screen. Below is the XML for my TabLayout.

<android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@color/white"
            app:tabGravity="center"
            app:tabIndicatorColor="@color/about_tab_selected"
            app:tabIndicatorHeight="4dp"
            app:tabMode="scrollable"
            app:tabPaddingEnd="20dp"
            app:tabPaddingStart="20dp"
            app:tabSelectedTextColor="@color/about_tab_selected"
            app:tabTextAppearance="@style/UGTabTextAppearance"
            app:tabTextColor="@color/about_tab_unselected" />

However, my Tabs are still displayed to the left, and I'm unable to center them in the Activity.

What I'm getting is this: enter image description here

What I really want is: enter image description here

Can somebody please tell me what I'm doing wrong here? If you need additional information regarding the rest of the XML, please let me know.



Solution 1:[1]

Tab gravity only effects MODE_FIXED.

One possible solution is to set your layout_width to wrap_content and layout_gravity to center_horizontal

Solution 2:[2]

Ok, so the problem was with layout_width="match_parent"

When I changed that to layout_width="wrap_content", it solved my problem.

The final XML is:

<android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@color/white"
        app:tabGravity="center"
        app:tabIndicatorColor="@color/about_tab_selected"
        app:tabIndicatorHeight="4dp"
        app:tabMode="scrollable"
        app:tabPaddingEnd="20dp"
        app:tabPaddingStart="20dp"
        app:tabSelectedTextColor="@color/about_tab_selected"
        app:tabTextAppearance="@style/UGTabTextAppearance"
        app:tabTextColor="@color/about_tab_unselected" />

Solution 3:[3]

if you set any font just remove and run the code and check.

Solution 4:[4]

Note that TabGravity only effects MODE_FIXED

You can resolve the alignment issue by setting your layout_width to wrap_content and layout_gravity to center_horizontal

<android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        app:tabGravity="center"
        ...
 />

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dishonered
Solution 2 Rachit
Solution 3 P.Onkar AppDev
Solution 4 Codemaker