Scrolling Tabs in Android
Perhaps this is obvious but it wasn’t immediately clear to me so maybe it’s worth documenting for the benefit of future Google searchers. If you use a TabActivity in an Android application you can probably fit four or maybe five tabs on a standard screen in portrait orientation before things become too cramped. To display more tabs than this and still be able to read the text on each it would be ideal to have a scrolling tab widget like many UI toolkits do. But how can you do this in an Android app?
Reading the patchy Android API documentation is rarely an illuminating experience at the best of times and it doesn’t help in this instance either because the possibility of scrolling tabs is not even mentioned in the entries for TabHost and TabWidget. In the absence of any better ideas you might speculatively attempt to wrap the TabWidget in a ScrollView. Don’t bother, it won’t do anything, ScrollView only provides vertical scrolling.
If, like me, you thought that ScrollView was the last word in scrolling Android widgets, you may have failed to notice android.widget.HorizontalScrollView. The name fails to conceal what this class is about. It’s the solution to your non-scrolling tab woes.
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="wrap_content" android:layout_height="wrap_content"/> </HorizontalScrollView> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent" /> </LinearLayout> </TabHost>
Set android:fillViewport to true to ensure that the tabs stretch the full width like they would without a scroller and set android:scrollbars to none to avoid having a scrollbar displayed between the tabs and the content. The scrollable tabs will be rendered with faded edges on the right and/or left depending on which direction you can scroll (see image above).
on April 18th, 2011 at 7:40 pm
Finally! I’ve been looking for a solution for the past week.
on April 18th, 2011 at 8:17 pm
This works better than I expected — I was under the impression from Google that this was a problem to implement.
That being said, I think that it will work better if you define your own tab indicators. In a test I just ran on the 2.2 emulator, there is no margin set on the default tab indicator text, and so the text runs right to the edges of the tabs. Using your own TextView with your own margins should resolve this, though I have yet to try it.
Thanks!
on April 19th, 2011 at 12:15 pm
Hi, Do u have any idea how to make Scrollable menu bar like fox news app.
I’m really tired looking for a solution.
Thanks!
on April 28th, 2011 at 9:53 pm
@Mark: There seems to be some variation between devices in how the tabs are rendered. In a simple test I discovered that on my HTC Legend (which is the source of the above screenshot) the left and right padding is 11px whereas for the equivalent emulator configuration (2.2/MDPI) the padding was only 3px. Explicitly specifying the padding gave better results on the emulator.