Theme.Holo Causes Horizontally Scrolling TabWidget to Get Cutoff

If your Android app uses tabs that are implemented using the TabHost and TabWidget wrapped in a HorizontalScrollView you may have noticed that the last tab may get cut off at the end. This happens when the activity containing the tabs is using the Holo theme introduced in Honeycomb. Interestingly this bug only occurs in Jellybean.

The reason is because the HorizontalScrollView doesn’t take the width of the tab dividers into account.

To fix this, make sure you don’t call setDividerDrawable anywhere:

// This line should be removed as we don't want to set a tab divider
getTabHost().getTabWidget().setDividerDrawable(R.drawable.tab_divider);

Secondly, you want to add the attribute android:divider=”@android:color/transparent” to your TabWidget layout element. Your layout XML should look something like this:

<HorizontalScrollView android:id="@+id/tabscroller"
 android:scrollbars="none"
 android:layout_width="0dip"
 android:layout_height="fill_parent"
 android:fillViewport="false" >
 	<TabWidget android:id="@android:id/tabs"
			android:layout_width="0dip"
			android:layout_height="fill_parent"
			android:divider="@android:color/transparent" />
</HorizontalScrollView>