Make Tabs on ActionBar scroll when reach limit, rather than create a dropdown-list

Question

As the title suggests, I have an Android 4.0 Tablet app, that uses the Actionbar and tab mode.

If I add any more than 4 or 5 tabs to the action bar, a dropdown list is created instead. I have read the documentation, which states, "Note: In some cases, the Android system will show your action bar tabs as a drop-down list in order to ensure the best fit in the action bar."

Was just wondering if it is possible to override the default behavior and get the actionbar to scroll the items? The design document http://developer.android.com/design/patterns/actionbar.html talks about scrollable tabs, but I can't seem to find any information on them other than in the design document.

Answer 1

I have been struggling to get this to work. However, after playing with ActionBarSherlock, the solution is infuriatingly easy. If you download the sample Styled source and look in the MainActivity class, you can see it create and add the tabs, and beneath that:

actionBar.setDisplayShowTitleEnabled(false);
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

I had called these BEFORE adding the tabs, and my tabs had been turned into a drop-down list. Turns out, all you need to do is call them after adding the tabs instead to keep the scrolling tabs.

Answer 2

Read the "Adding an Action View" section from http://developer.android.com/guide/topics/ui/actionbar.html

An action view is a widget that appears in the action bar as a substitute for an action item's button.

You can use HorizontalScrollView as action view by specifying

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/mytabwidget"
      android:title=""
      android:icon="@drawable/ic_launcher"
      android:showAsAction="always"
      android:actionViewClass="android.widget.HorizontalScrollView" />
</menu>

Get reference to this HorizontalScrollView in public boolean onCreateOptionsMenu(Menu menu)

Define a RadioGroup with some RadioButton where each RadioButton when selected, will update its associated tabs contents. Now add this RadioGroup to HorizontalScrollView which you will get in public boolean onCreateOptionsMenu(Menu menu)

You can use selectTab(ActionBar.Tab tab) or some other equivalent method to update tabs contents.

You can change the look of RadioButton by setting android:button to transparent image and then setting some StateListDrawable with states checked, selected and normal..

See below screen I got using this method.

In above image, each RadioButton when checked, selects different tab.