How to make TabLayout take up full width of the screen?

Question

My tabs on the TabLayout occupy the centre of the screen and are not filling the entire width even after adding tabMaxWidth = "0dp" as per Adam John's answer

That is I want by tabs to extend to fill screen like this:

But what I get is this:

My XML looks like this:

<android.support.design.widget.TabLayout
            android:id="@+id/tl_contact_type"
            style="@style/tabWidgetLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMaxWidth="0dp"
            app:tabGravity="fill"
            app:tabMode="fixed"/>

style.xml for tabWidgetLayout

<style name="tabWidgetLayout" parent="Widget.Design.TabLayout">
            <item name="tabIndicatorColor">@color/colorTealAccent</item>
            <item name="tabIndicatorHeight">@dimen/default_corner_radius_medium</item>
            <item name="tabBackground">?attr/selectableItemBackground</item>
            <item name="android:background">@color/colorBrandPrimaryDark</item>
            <item name="tabSelectedTextColor">@color/color_tab_selected_text</item>
            <item name="tabTextAppearance">@style/tabWidgetLayoutTextAppearance</item>
        </style>

Any help to fix this is much appreciated.

from screenshot it seems like you are running it on a Tablet. Give it a try on a normal android phone — Vivek Mishra, Sep 16 '16 at 10:50
@VivekMishra Thanks for your suggestion. However, those were stock images, I only added them to emphasise on how my layout is rendered. I've been trying on normal android phone (HTC) all along and the tabs doesn't take up the full width. — not_again_stackoverflow, Sep 16 '16 at 10:56
can you post `tabWidgetLayout` your `style` in the question ?? — Harshad Pansuriya, Sep 16 '16 at 11:01

score 23 · Accepted Answer · answered Sep 16 '16 at 11:02

Try below snippet

<android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMaxWidth="0dp"
            app:tabGravity="fill"
            app:tabMode="fixed" />

Sagar Gangawane · Answer 2 · 2017-07-10T05:22:47.533

0

 <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabMaxWidth="0dp"
        app:tabGravity="fill"/>

Tell me this sloved your issue or not.

Happy to help.

edited Jul 10 '17 at 05:22

answered Sep 16 '16 at 10:52

Sagar Gangawane

1,985
1
12
22

Thanks for your suggestion! But it didn't solve the issue. This was my initial layout to start with. And as per link I attached to the question, I added `tabMaxWidth` parameter. – not_again_stackoverflow Sep 16 '16 at 11:08

score 0 · Answer 3 · answered Sep 16 '16 at 11:00

0

Worth looking at @style/tabWidgetLayout and its parent layout for padding and margin values.

answered Sep 16 '16 at 11:00

user1506104

6,554
4
71
89

I revisited my app that uses tab layout. Looks like this is a default behaviour of tabs. On my phone, tab occupies the whole width on portrait but does not on landscape. Have you tried running on sw600? – user1506104 Sep 17 '16 at 03:19

score 0 · Answer 4 · answered Sep 16 '16 at 11:09

<android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed"
            app:tabGravity="fill"
            app:tabSelectedTextColor="@color/ColorPrimary"
            app:tabIndicatorColor="@color/ColorPrimary"
            app:tabTextColor="#000"
            app:tabBackground="@color/cardview_light_background"/>

Replace your code with this.

score 0 · Answer 5 · answered Sep 16 '16 at 11:36

I think the problem is that you are not extending the android:Widget Try adding this to your styles.xml:

<style name="Base.Widget.Design.TabLayout" parent="android:Widget">
    <item name="tabBackground">@drawable/tab_background</item>
    <item name="tabIndicatorColor">@color/colorAccent</item>
    <item name="tabIndicatorHeight">2dp</item>
</style>

Then in your layout:

<android.support.design.widget.TabLayout
                android:id="@+id/tabLayout"
                style="@style/Base.Widget.Design.TabLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabGravity="fill"
                app:tabMode="fixed" />

EDIT: This I found long time ago in another question (which I can't remember) and it worked for me

score 0 · Answer 6 · answered Oct 01 '20 at 13:52

Change android:layout_width="match_parent" or set a custom size on this attribute

<android.support.v4.view.ViewPager
        android:id="@+id/viewTab"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_editor_absoluteX="8dp"
        app:layout_editor_absoluteY="8dp">

    </android.support.v4.view.ViewPager>

How to make TabLayout take up full width of the screen?

6 Answers6