Search code examples
androidandroid-layoutandroid-stylesandroid-tablayout

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


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:

enter image description here

But what I get is this:

enter image description here

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.


Solution

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