How to implement horizontally scrollable tabs?
Solution 1
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
Solution 2
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" />
Solution 3
This is a pretty good example by using HorizontalScrollView. http://java.dzone.com/articles/scrolling-tabs-android
Solution 4
<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
Admin
Updated on February 01, 2020Comments
-
Admin over 4 years
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?