CODEWITHSUNDEEP
androidandroid-layoutandroid-stylesandroid-tablayout
not_again_stackoverflow
not_again_stackoverflow

Reputation: 1323

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.

Upvotes: 15

Views: 13929

Answers (6)

janvier
janvier

Reputation: 1

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>

Upvotes: 0

Sagar Gangawane
Sagar Gangawane

Reputation: 1985

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

Upvotes: 0

Motassem Jalal
Motassem Jalal

Reputation: 1314

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

Upvotes: 0

Azhar osws
Azhar osws

Reputation: 188

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

Upvotes: 0

subrahmanyam boyapati
subrahmanyam boyapati

Reputation: 2878

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

Upvotes: 24

user1506104
user1506104

Reputation: 7086

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

Upvotes: 0

Related Questions