Mobile Zone is brought to you in partnership with:

Dan is the founder of Rectangular Software, an independent UK software company that provides development services and builds its own mobile and web applications. Dan has over a decade of experience in the software industry, building a wide variety of systems including casino, poker and spread-betting platforms, mobile applications, e-commerce websites, and network security software. His other programming interests include artificial intelligence, particularly evolutionary computation, and functional programming in Haskell. He has authored, or contributed to, a number of open source Java projects. Dan has posted 34 posts at DZone. You can read more from them at their website. View Full User Profile

Scrolling Tabs in Android

04.18.2011
| 42194 views |
  • submit to reddit

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.

Android scrollable tabsIf, like me, you thought that ScrollView with its horizontal and vertical scrolling was the last word in scrolling Android widgets, you may have failed to notice the more modest capabilities of 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="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>

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

 

From http://blog.uncommons.org/2011/04/18/scrolling-tabs-in-android/

Published at DZone with permission of its author, Dan Dyer.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Tags:

Comments

Shoaib Almas replied on Sat, 2012/08/25 - 5:52am

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.

Java Forum

Igor Ganapolsky replied on Mon, 2012/09/10 - 8:20pm

This does not work for me.  Nothing scrolls, even on a tiny Sony XPeria Mini - where I have 4 tabs in my application.  It just tries to squeeze them all in.

Richard Jessop replied on Sat, 2012/12/22 - 4:32pm in response to: Shoaib Almas

 Just put spaces of the left and the right; not elegant but simple.

Jack Jackson replied on Wed, 2013/05/01 - 12:06pm

Hi! Useful article!

I've got only one question: when I switch between the tabs, the indicator doesn't follow the page.. but it stays in the default position. I need to scroll to left to view the indicator of the relative tabs.

I don't know if you understand me...

Thanks.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.