Tabs don't take full width using Design Support Library

Question

I'm following this tutorial that explains how to implement the new TabLayout included in the Google Design Support Library. Here's my app:

As can be seen in the above screenshot, my tabs are not taking full width of screen.

How can I fix it?

Here's my activity xml: (My Java code is the same as the one in the tutorial. In the following code my tablayout and viewpager are inside a FrameLayout)

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">
<!-- your content layout -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
    <!-- Toolbar instead of ActionBar so the drawer can slide on top -->
    <!-- If you want to have dark background for options buttons remove the popup theme -->
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            android:layout_width="match_parent"
            android:layout_height="@dimen/abc_action_bar_default_height_material"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize" />
    <!-- Real content goes here -->
        <FrameLayout
            android:id="@+id/content_frame"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" >
            <android.support.design.widget.TabLayout
                android:id="@+id/sliding_tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabMode="scrollable" />
            <android.support.v4.view.ViewPager
                android:id="@+id/viewpager"
                android:layout_width="match_parent"
                android:layout_height="0px"
                android:layout_weight="1"
                android:background="@android:color/white" />
        </FrameLayout>
    </LinearLayout>
    <android.support.design.widget.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:id="@+id/nav_view"
        app:headerLayout="@layout/nav_view_header"
        app:menu="@layout/nav_view_menu"
        app:theme="@style/MyTheme.NavMenu" />
</android.support.v4.widget.DrawerLayout>

EDIT:

After adding app:tabGravity="center" and changing app:tabMode to fixed, here's how the app looks:

I need them to fill the width.

This question is not a duplicate. the other answer did not fix my issue.

Possible duplicate of [Tabs in TabLayout not filling up entire ActionBar](http://stackoverflow.com/questions/30721498/tabs-in-tablayout-not-filling-up-entire-actionbar) — ʍѳђઽ૯ท, Jan 19 '16 at 13:38

ʍѳђઽ૯ท · Accepted Answer · 2016-01-19T13:54:56.807

2

http://developer.android.com/reference/android/support/design/widget/TabLayout.html

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.

Just set this in your TabLayout:

app:tabMode="fixed"

Edit:

I'm using this and it's working:

             <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/toolbar"
                android:background="?attr/colorPrimary"
                android:minHeight="?attr/actionBarSize"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

Seems like you don't need to set anything.

proof:

Btw, you can check this also:

tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

edited Jan 19 '16 at 13:54

answered Jan 19 '16 at 13:22

ʍѳђઽ૯ท

16,646
7
53
108

Yes, you would have to use `gravity_center`! – zIronManBox Jan 19 '16 at 13:23
Remove that scrollable.that should work then i guess: this line : `app:tabMode="scrollable"` – ʍѳђઽ૯ท Jan 19 '16 at 13:28
I already did. I changed `tabMode` to `fixed` as you suggested. it doesn't work. – Vahid Amiri Jan 19 '16 at 13:32
I found a solution. Check my answer. – Vahid Amiri Jan 19 '16 at 13:48
2

You are right saying that without xml attributes it works, but you are wrong suggesting tabGravity="center". The right combination is tabGravity="fill" and tabMode="fixed" (which is the default). – natario Jan 19 '16 at 13:53
1

OK, you're right. Without setting anything it would work. My bad. Accepted your answer. – Vahid Amiri Jan 19 '16 at 13:56
1

Thank you for being honest by the way :) – ʍѳђઽ૯ท Jan 19 '16 at 13:57

Vahid Amiri · Answer 2 · 2016-01-19T13:49:11.720

0

The solution was to add these to both xml and java:

In Java:

tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

And in XML for TabLayout:

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

Result:

edited Jan 19 '16 at 13:49

answered Jan 19 '16 at 13:45

Vahid Amiri

10,769
13
68
113

What is the difference with my answer? :) – ʍѳђઽ૯ท Jan 19 '16 at 13:49
The Java code is a must. Gravity needs to be set in both xml and java. In xml it needs to be set to `center` and in java to `fill` – Vahid Amiri Jan 19 '16 at 13:49
You won't need that, my answer is working.without these two! – ʍѳђઽ૯ท Jan 19 '16 at 13:52
@LinX64, Well I tried that like 10 times and It wasn't working. – Vahid Amiri Jan 19 '16 at 13:53
1

So, the question is duplicate.you could take a look at that question i've already commented as the duplicate.such as: http://stackoverflow.com/a/30721642/4409113 – ʍѳђઽ૯ท Jan 19 '16 at 13:54

score -1 · Answer 3 · edited Jan 19 '16 at 14:39

-1

set TabLayoutMode like this:

tabLayout.setTabMode(TabLayout.MODE_FIXED);

edited Jan 19 '16 at 14:39

ʍѳђઽ૯ท

16,646
7
53
108

answered Jan 19 '16 at 13:35

Prashantgpatil

29
4

1

How is this different than setting `app:tabMode="fixed"` which I already did? – Vahid Amiri Jan 19 '16 at 13:40

Tabs don't take full width using Design Support Library

3 Answers3