How to enable horizontal scroll in tab like Google Play?

Question

I'm referencing a great demo here regarding material design. It has tabs, but when I add too many the tab items get squished (see screenshot). How can I make it scroll horizontally?

I believe below is the layout I should make the change, but I combed the docs and can't seem to get it, pls help!

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <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>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_done" />

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

Solution 1

TabLayout has a method setTabMode() which can be either MODE_FIXED (default) or MODE_SCROLLABLE which is what you need.

You can also define this in XML with app:tabMode="scrollable".

Solution 2

You can add this app:tabMode="scrollable" to your android.support.design.widget.TabLayout

Solution 3

If you added

app:tabMode="scrollable" 

like mentioned above and it,

shows the layout and you are not able to scroll

Then maybe you have put it at the top of the XML file and below it added matchh_parent (height/width) to the ViewPager. Because the viewpager is above the tab layout you will not be able to scroll. Add it at the bottom of the XML so another view does to overlap the tab layout.

Comments

[TruMan1]

I'm finding example of how to make this from scratch, is this not a native control?

[Sebastian Pakieła]

As far I know its not included in library, but there is a source code of this controls. developer.android.com/samples/SlidingTabsBasic/index.html You need to copy them to your project.

[Ekansh Rastogi]

refer to this blog for a demo ekiras.com/2015/12/…

[Md Imran Choudhury]

In my case I use TabLayout in left. Is it possible to scroll in vertical?

[ρяσѕρєя K]

What is difference between your and accepted Answer ?