Tabs in TabLayout not filling up entire ActionBar

Question

I am using a TabLayout and ViewPager to display ActionBar tabs following the guide Google Play Style Tabs using TabLayout, however my tabs are squished to the left side of the ActionBar, shown below:

And I would like them to take up the whole bar with equal widths. I've made only a few minor changes to the guide:

In activity_main.xml a style was created to show the ActionBar:

<android.support.design.widget.TabLayout
  android:id="@+id/sliding_tabs"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  style="@style/AppTheme"
  app:tabMode="scrollable" />

Here is the styles.xml code:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
  <item name="windowActionBar">true</item>
  <item name="tabIndicatorColor">#ffff0030</item>
</style>

Also, my MainActivity now extends AppCompatActivity instead of a FragmentActivity.

Your TabLayout is embedded within a LinearLayout as shown in the guide? — almightyGOSU, Jun 09 '15 at 01:23
**app:tabGravity:"fill"** and **app:tabMaxWidth="0dp"** did for me ! — eRaisedToX, Apr 05 '17 at 12:05

Parth Anjaria · Answer 1 · 2019-02-05T06:36:32.067

44

Simple answer which I got from here.

You just put this in your xml code :

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

edited Feb 05 '19 at 06:36

answered May 12 '16 at 05:44

Parth Anjaria

3,961
3
30
62

6

You are killing it! The tabMaxWidth parameter helped me to fix a non working device. app:tabGravity="fill" & app:tabMode="fixed" was not enough for one of my device. – Tobliug Jul 20 '16 at 08:31
2

this fixed a problem for me in landscape mode (even though it was working fine in portrait) – TWL Nov 22 '16 at 02:04
4

app:tabMaxWidth="0dp" was the solution I needed. Thanks! – Philipp Schumann Dec 15 '16 at 21:02
1

app:tabMaxWidth="0dp" saved me. Thanks – Zayid Mohammed Jul 05 '17 at 06:37
1

for mentioning `app:tabMaxWidth="0dp"` +1 !! – iUser Jul 04 '19 at 18:45

Ellie Zou · Accepted Answer · 2017-01-15T06:54:35.270

You can refer to the TabLayout.

GRAVITY_CENTER Gravity used to lay out the tabs in the center of the TabLayout.

GRAVITY_FILL Gravity used to fill the TabLayout as much as possible.

MODE_FIXED Fixed tabs display all tabs concurrently and are best used with content that benefits from quick pivots between tabs.

MODE_SCROLLABLE Scrollable tabs display a subset of tabs at any given moment, and can contain longer tab labels and a larger number of tabs.

Set this in your code or your layout xml.

app:tabGravity="center"
app:tabMode="fixed"

or

tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER);
tabLayout.setTabMode(TabLayout.MODE_FIXED);

Generally, using the code like blow can work without setting tabGravity and tabMode.

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_scrollFlags="scroll|enterAlways" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</android.support.design.widget.AppBarLayout>

I took out the line `app:tabMode="scrollable"` and it resolved the issue. — clever_trevor, Jun 09 '15 at 22:43
I too can confirm that removing app:tabMode="" from the XML file resolved everything. Changing the tabMode value would still make the the tabs appear squished. It was only resolved by not including this attribute at all. — ChallengeAccepted, Sep 02 '15 at 10:12
i have a dynamic tabs content, it works when i have multiple tabs but when there is only one tab the text isnt shown to the fullest (the tab only spanns to the icon width) is there a way to tackle this issue — Gabriel H, Mar 22 '17 at 20:26

score 3 · Answer 3 · answered Jun 09 '15 at 01:32

3

Try adding this to MainActivity:

tabLayout.setTabMode(TabLayout.MODE_FIXED);
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

answered Jun 09 '15 at 01:32

rpcao

75
6

score 1 · Answer 4 · answered Oct 20 '15 at 13:17

Add - app:tabGravity="fill" property in the xml.

For Example -

<android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="fill" />

score 0 · Answer 5 · answered Apr 22 '16 at 07:36

0

try this it works

 app:tabGravity="fill"
 app:tabMode="fixed"

answered Apr 22 '16 at 07:36

Mobi10

41
5

score 0 · Answer 6 · edited Mar 27 '17 at 10:59

0

Set TabLayout width to match Parent

Like this.

<TabLayout
    android:layout_width="match_parent"
    android:layout_height="60dp"/>

edited Mar 27 '17 at 10:59

MashukKhan

1,946
1
27
46

answered Jun 17 '16 at 16:09

Haseeb Mir

928
1
13
22

Tabs in TabLayout not filling up entire ActionBar

6 Answers6

Linked