CODEWITHSUNDEEP
androidmaterial-designandroid-design-libraryandroid-support-design
TruMan1
TruMan1

Reputation: 36088

How to enable horizontal scroll in tab like Google Play?

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>

Upvotes: 49

Views: 35379

Answers (4)

shekhar g h
shekhar g h

Reputation: 1251

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.

Upvotes: 2

Exel Staderlin
Exel Staderlin

Reputation: 535

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

Upvotes: 5

Lamorak
Lamorak

Reputation: 11137

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

Upvotes: 139

Sebastian Pakieła
Sebastian Pakieła

Reputation: 3029

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.

Upvotes: 0

Related Questions