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.

Maineetloire

from screenshot it seems like you are running it on a Tablet. Give it a try on a normal android phone – Usually

@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. – Maineetloire

And removing maxWidth still leaves it the same? – Fearless

can you post tabWidgetLayout your style in the question ?? – Amanuensis

@Fearless Yes. Still leaves the same. – Maineetloire

@Ironman just added an edit. Thanks! – Maineetloire

Answer 1

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

Galliwasp

Answer 2

 <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.

Millionaire

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. – Maineetloire

Answer 3

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

Perverse

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? – Perverse

Answer 4

<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.

Forth

Answer 5

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

Semiprofessional

Answer 6

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>

Corie