Tabs don't take full width using Design Support Library
<p>I'm following <a href="https://github.com/codepath/android_guides/wiki/Google-Play-Style-Tabs-using-TabLayout" rel="nofollow noreferrer">this tutorial</a> that explains how to implement the new TabLayout included in the Google Design Support Library. Here's my app:</p>

<p><a href="https://i.stack.imgur.com/68ZCb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/68ZCb.png" alt="enter image description here"></a></p>

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

<p>How can I fix it?</p>

<p>Here's my activity xml:
(My Java code is the same as the one in <a href="https://github.com/codepath/android_guides/wiki/Google-Play-Style-Tabs-using-TabLayout" rel="nofollow noreferrer">the tutorial</a>. In the following code my tablayout and viewpager are inside a FrameLayout)</p>

<pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;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"&gt;
&lt;!-- your content layout --&gt;
    &lt;LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"&gt;
    &lt;!-- Toolbar instead of ActionBar so the drawer can slide on top --&gt;
    &lt;!-- If you want to have dark background for options buttons remove the popup theme --&gt;
        &lt;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" /&gt;
    &lt;!-- Real content goes here --&gt;
        &lt;FrameLayout
            android:id="@+id/content_frame"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" &gt;
            &lt;android.support.design.widget.TabLayout
                android:id="@+id/sliding_tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabMode="scrollable" /&gt;
            &lt;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" /&gt;
        &lt;/FrameLayout&gt;
    &lt;/LinearLayout&gt;
    &lt;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" /&gt;
&lt;/android.support.v4.widget.DrawerLayout&gt;
</code></pre>

<p>EDIT:</p>

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

<p><a href="https://i.stack.imgur.com/YdJdP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YdJdP.png" alt="enter image description here"></a></p>

<p>I need them to fill the width.</p>

<p><strong>This question is not a duplicate. the other answer did not fix my issue.</strong></p>