27

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.

4
  • Your TabLayout is embedded within a LinearLayout as shown in the guide? Jun 9, 2015 at 1:23
  • Yes it is with the LinearLayout Jun 9, 2015 at 1:49
  • 2
    add this will work:app:tabGravity="fill"
    – Weel
    Sep 22, 2016 at 16:25
  • 6
    app:tabGravity:"fill" and app:tabMaxWidth="0dp" did for me !
    – eRaisedToX
    Apr 5, 2017 at 12:05

6 Answers 6

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" />
5
  • 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, 2016 at 8:31
  • 2
    this fixed a problem for me in landscape mode (even though it was working fine in portrait)
    – TWL
    Nov 22, 2016 at 2:04
  • 4
    app:tabMaxWidth="0dp" was the solution I needed. Thanks! Dec 15, 2016 at 21:02
  • 1
    app:tabMaxWidth="0dp" saved me. Thanks Jul 5, 2017 at 6:37
  • 1
    for mentioning app:tabMaxWidth="0dp" +1 !!
    – iUser
    Jul 4, 2019 at 18:45
41

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>
3
  • 3
    I took out the line app:tabMode="scrollable" and it resolved the issue. Jun 9, 2015 at 22:43
  • 1
    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. Sep 2, 2015 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, 2017 at 20:26
3

Try adding this to MainActivity:

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

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

try this it works

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

Set TabLayout width to match Parent

Like this.

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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.