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?

enter image description here

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>

Did you try put your `TabLayout` in `HorizontalScrollingView`? — Damian Kozlak, Jul 02 '15 at 20:47
hey @N1to that worked! Pls leave as an answer and I'll accept. I just wrapped the `TabLayout` with ``. Only thing is when I swipe to a tab off the screen, it doesn't focus on that tab. — TruMan1, Jul 02 '15 at 21:07
Don't do that, TabLayout itself is already an HorizontalScrollview. You should set the TabLayout in MODE_SCROLLABLE (it's in the docs) — BladeCoder, Jul 02 '15 at 22:05

score 137 · Accepted Answer · answered Jul 02 '15 at 21:50

137

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

answered Jul 02 '15 at 21:50

Lamorak

10,957
9
43
57

refer to this blog for a demo http://www.ekiras.com/2015/12/how-to-implement-material-design-tab-layout-in-android.html – Ekansh Rastogi Dec 10 '15 at 20:16
In my case I use TabLayout in left. Is it possible to scroll in vertical? – Md Imran Choudhury Dec 21 '16 at 11:20

score 5 · Answer 2 · edited Jan 17 '17 at 01:39

5

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

edited Jan 17 '17 at 01:39

ρяσѕρєя K

132,198
53
198
213

answered Jan 17 '17 at 01:36

Exel Staderlin

535
7
10

9

What is difference between your and accepted Answer ? – ρяσѕρєя K Jan 17 '17 at 01:40

score 2 · Answer 3 · answered May 12 '21 at 16:54

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.

score 0 · Answer 4 · answered Jul 02 '15 at 20:54

0

SlidingTabLayout and SlidingTabStrip classes is what are you looking for You need to copy these classes from google developers site, add sliding tab layout in xml, and in set viewpager for sliding tab layout in java. Hope it'll help.

answered Jul 02 '15 at 20:54

Sebastian Pakieła

2,970
1
16
24

I'm finding example of how to make this from scratch, is this not a native control? – TruMan1 Jul 02 '15 at 21:02
As far I know its not included in library, but there is a source code of this controls. https://developer.android.com/samples/SlidingTabsBasic/index.html You need to copy them to your project. – Sebastian Pakieła Jul 02 '15 at 21:05

How to enable horizontal scroll in tab like Google Play?

4 Answers4

Linked