How to implement horizontally scrollable tabs?

Question

I'm trying to implement this application. At the moment I have designed tabs on it and since I have more than 7 tabs it looks too congested. How can I design it so that the tabwidget is scrollable horizontally. I have seen this design on few of the apps at the market but no clue how to implement this in my app.

One app I saw had a horizontal scrollview where it scrolls on its own and when you press the particular image/button it displays some content. It didn't seem to be tabs I guess.

So does anyone have an idea of this?

score 15 · Answer 1 · answered Jan 14 '16 at 13:02

15

TabLayout from Android design library

<android.support.design.widget.TabLayout
    android:id="@+id/categories"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:tabMode="scrollable" />

answered Jan 14 '16 at 13:02

Juozas Kontvainis

9,461
6
55
66

score 4 · Answer 2 · answered Mar 14 '12 at 14:36

4

This is a pretty good example by using HorizontalScrollView. http://java.dzone.com/articles/scrolling-tabs-android

answered Mar 14 '12 at 14:36

Calvin

3,302
2
32
41

Hi Calvin thanks for your post It worked for me. I developing an app for a tablet. but the tabs dont take the width of the texts>. Hope you get what i mean it looks all congested Can i define a width for the tab sot hat it holds the complete text in it. eg: if there is a tab saying "User Profile" but it shows only as "User" – Mar 14 '12 at 15:34

score 2 · Answer 3 · answered Jan 31 '16 at 13:43

<HorizontalScrollView 
    android:id="@+id/vTabs" 
    android:scrollbars="none" 
    android:layout_width="fill_parent" 
    android:layout_alignParentBottom="true"
    android:layout_height="wrap_content">
    <LinearLayout 
        android:orientation="horizontal" 
        android:background="@color/main_color_gray_dk" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content">
        <Button 
            android:enabled="false" 
            android:id="@+id/tab1" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:text="@string/popular" />
        <View 
            android:id="@id/view1" 
            android:layout_width="@dimen/pad_1dp" 
            android:layout_height="fill_parent" />
        <Button 
            android:id="@id/tab2" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:text="@string/newest" />
        <View 
            android:id="@id/view1" 
            android:layout_width="@dimen/pad_1dp" 
            android:layout_height="fill_parent"  />
        <Button 
            android:id="@id/tab3" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:text="@string/distance" />
        <View 
            android:id="@id/view1" 
            android:layout_width="@dimen/pad_1dp" 
            android:layout_height="fill_parent"  />
        <Button 
            android:id="@+id/tab4" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:text="@string/minimum"  />
    </LinearLayout>
</HorizontalScrollView>

Change Texts to your taste. Place in a relatveLayout and alignToParentBottom="true" Hope this helps

score 2 · Accepted Answer · answered Mar 14 '12 at 14:36

2

Please check out Jake Wharton's ViewPager app. That is exactly what you need. It is a library project, so you have to include it in your project.

JakeWharton / Android-ViewPagerIndicator

answered Mar 14 '12 at 14:36

Blehi

1,990
1
18
20

Hi Calvin thanks for your post It worked for me. I developing an app for a tablet. but the tabs dont take the width of the texts>. Hope you get what i mean it looks all congested Can i define a width for the tab sot hat it holds the complete text in it. eg: if there is a tab saying "User Profile" but it shows only as "User" – Mar 14 '12 at 15:34
@roses_r just remove the onMeasure(int, int) method from the class TabPageIndicator of the library. It works. – alu Oct 19 '15 at 07:32

score 0 · Answer 5 · answered Oct 24 '15 at 00:08

Check this link: https://dzone.com/articles/scrolling-tabs-android

Wrap your TabWidget with a HorizontalScrollView and the tab set will be able to expand beyond the width of the screen and the user can drag the tabs left and right as required:

<?xml version="1.0" encoding="utf-8"?><TabHost xmlns:android="http://schemas.android.com/apk/res/android"         android:id="@android:id/tabhost"         android:layout_width="fill_parent"         android:layout_height="fill_parent">  <LinearLayout android:orientation="vertical"                android:layout_width="fill_parent"                android:layout_height="fill_parent">    <HorizontalScrollView android:layout_width="fill_parent"                          android:layout_height="wrap_content"                          android:fillViewport="true"                          android:scrollbars="none">      <TabWidget android:id="@android:id/tabs"                 android:layout_width="fill_parent"                 android:layout_height="wrap_content"/>    </HorizontalScrollView>    <FrameLayout android:id="@android:id/tabcontent"                 android:layout_width="fill_parent"                 android:layout_height="fill_parent" />  </LinearLayout></TabHost>

How to implement horizontally scrollable tabs?

5 Answers5

Linked

Related