How to implement horizontally scrollable tabs?

Question

I am trying to implement this application. At the moment, I have developed tabs on it, and since I have more than 7 tabs, it looks too overloaded. How can I create it so that the tabwidget scrolls horizontally. I saw this project on several applications in the market, but I don’t know how to implement this in my application.

In one application that I saw, there was horizontal scrolling, where it scrolls by itself, and when you click on a particular image / button, it displays some content. I think these were not tabs.

Anyone have an idea about this?

Answer 1

Check out the Jake Wharton ViewPager app. This is exactly what you need. This is a library project, so you should include it in your project.

JakeWharton / Android-ViewPagerIndicator

Answer 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" /> 

Answer 3

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

Answer 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 the text to your taste. Place in relatveLayout and alignToParentBottom = "true" Hope this helps

Answer 5

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

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

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