TabLayout gravity center is not working

Question

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:

What I really want is:

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.

Crossstaff

just add app:tabMode="fixed" – Indivertible

Answer 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

Rarefaction

Answer 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" />

Crossstaff