Android TabLayout - Tabs collapsed left

I have implemented a working TabLayout. Here the xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        app:elevation="4dp">

    <android.support.design.widget.TabLayout
        android:id="@+id/club_sliding_tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="fill"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="@android:color/white"
        app:tabTextColor="#EEEEEE"/>

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

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1"
        android:background="@android:color/white"/>

</LinearLayout>

      

        
        
        
      

    

Then download it using 4 tabs. Then what happens is that the tabs do not fill the screen width, but they are "linearly" added to the left, so there is white space at the right end of the tab bar.

I've tried it tabMode="fixed"

, but it results in tab headers being split across two lines, e.g .:

CALEND
AR

      

        
        
        
      

    

Someone had the same problem and got it resolved? Thank.