Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to manage the width of ActionBar navigation tabs?

I am using ActionBarSherlock and have an ActionBar with navigation tabs in it. I want the tabs to auto-size based on the size of the text in them, but there seems to be a style or a setting somewhere that is forcing them to use a minimum size. So for example in the screenshot the tab "Very Long Tab" has no padding (in accordance with the styling I applied) but the tabs marked "T" have a great deal of padding, despite me setting padding to 0dp.

enter image description here

As you can see below I've tried a brute-force approach by setting various attributes on several styles, but I've not succeeded yet.

How do I control the padding/width in the action bar tabs?

<style
    name="CustomActivity"
    parent="@style/Theme.Sherlock"
    >
    <item name="actionBarTabStyle">@style/customActionBarTabStyle</item>
    <item name="actionBarTabBarStyle">@style/customActionBarTabBarStyle</item>
    <item name="actionBarTabTextStyle">@style/customActionBarTabTextStyle</item>
</style>

<style name="customActionBarTabStyle" parent="style/Widget.Sherlock.ActionBar.TabView">
    <item name="android:background">@drawable/tab_indicator</item>
    <item name="android:paddingLeft">0dp</item>
    <item name="android:paddingRight">0dp</item>
    <item name="android:layout_width">wrap_content</item>
    <item name="android:minWidth">0dp</item>
</style>

<style name="customActionBarTabBarStyle" parent="style/Widget.Sherlock.ActionBar.TabBar">
    <item name="android:paddingLeft">0dp</item>
    <item name="android:paddingRight">0dp</item>
    <item name="android:layout_width">wrap_content</item>
    <item name="android:minWidth">0dp</item>
</style>

<style name="customActionBarTabTextStyle" parent="style/Widget.Sherlock.ActionBar.TabText">
    <item name="android:paddingLeft">0dp</item>
    <item name="android:paddingRight">0dp</item>
    <item name="android:layout_width">wrap_content</item>
    <item name="android:minWidth">0dp</item>
</style>
like image 986
Ollie C Avatar asked Mar 16 '12 15:03

Ollie C


1 Answers

From that screen shot it looks like you are testing on ICS which is good since you will be observing the behavior of the native action bar rather than think it is a bug with ActionBarSherlock.

Basically the action bar will attempt to expand tabs to take up an equal amount of space if there is enough room to do so in order to provide a cleaner look when there are only a few tabs.

By setting the actionBarTabTextStyle padding to zero you are actually making the problem worse since now the text in the first tab has nothing around it to prevent it from touching the dividers and edge of screen. If you increase the padding (or return it to default) you should see one of two things:

  1. The text will wrap to two lines.
  2. The tab bar will convert tabs to simply be as wide as their content and allow for horizontal scrolling.

I'm inclined to think that the former will happen due to the very thin widths of your second through fourth tab. Unfortunately this is just how the tab bar behaves and we need to just try an accomodate its behavior accordingly.

If possible, try to create tab labels that have a more unified width which will likely trigger the second state mentioned above. Keep testing with ICS so that you can ensure the behavior you're seeing is from the platform and then when running on pre-ICS you should get the same behavior from the library.

like image 132
Jake Wharton Avatar answered Sep 22 '22 17:09

Jake Wharton