ActionBar overflowing on pre-ICS devices

Question

I'm developing an application that needs to be compatible with Android 2.2+ it's using ActionBarSherlock to customize the ActionBar on pre-ICS devices.

I'm facing a problem only on 2.2 and 2.3 devices that makes the content of the ActionBar overflow even though the content fits the device screen. Something like this:

I've already tested (on the emulator) the device screen size (mdpi on 320x480) runnning Android 4.0 and it works fine, so I believe that problem is something related to the ActionBarSherlock.

I'm also tried drastically reducing my icon files, but it even though the images were smaller, the content was still overflowing.

Here is my styles.xml file:

<style name="AppBaseTheme" parent="Theme.Sherlock.Light.DarkActionBar">
</style>

<style name="AppTheme" parent="AppBaseTheme">
    <item name="actionBarStyle">@style/AppBaseTheme.ActionBarStyle</item>
    <item name="actionBarTabStyle">@style/AppBaseTheme.ActionBarTabStyle</item>
    <item name="actionBarTabBarStyle">@style/AppBaseTheme.ActionBarTabBarStyle</item>
</style>

<style name="AppBaseTheme.ActionBarStyle" parent="Widget.Sherlock.Light.ActionBar.Solid.Inverse">
    <item name="background">@drawable/action_bar_background</item>
    <item name="android:background">@drawable/action_bar_background</item>
</style>

<style name="AppBaseTheme.ActionBarTabStyle" parent="Widget.Sherlock.Light.ActionBar.TabView.Inverse">
    <item name="background">@android:color/transparent</item>
    <item name="android:background">@android:color/transparent</item>

    <item name="android:paddingLeft">0dip</item>
    <item name="android:paddingRight">0dip</item>
</style>

<style name="AppBaseTheme.ActionBarTabBarStyle" parent="Widget.Sherlock.Light.ActionBar.TabBar.Inverse">
    <item name="background">@drawable/action_bar_tab_divider</item>
    <item name="android:background">@drawable/action_bar_tab_divider</item>

    <item name="divider">@drawable/sp</item>
    <item name="android:divider">@drawable/sp</item>
</style>

The file @drawable/action_bar_background is 320px wide and both @drawable/action_bar_tab_divider and @drawable/sp are 1px wide.

And here is the code for creating the tabs on my main activity:

ActionBar actionBar = super.getSupportActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

this.createTab(actionBar, R.drawable.action_bar_tab_home_off);
this.createTab(actionBar, R.drawable.action_bar_tab_news_off);
this.createTab(actionBar, R.drawable.action_bar_tab_videos_off);
this.createTab(actionBar, R.drawable.action_bar_tab_guide_off);


private void createTab(ActionBar actionBar, int resource) {
    Tab t = actionBar.newTab();

    t.setTabListener(this);
    t.setIcon(resource);

    actionBar.addTab(t);
}

Any ideas?

Answer 1

One of the problems is that the Action View "Tab Bar" automatically scales images to a predetermined size, so even if you make the icon super large or super small it should fill roughly the same space in the action bar.

The TabBar/TabView was also designed to overflow, which you have already found ^.^ It's for apps that open up 10 to 20 different tabs at a time, the user can scroll through the list of them. Not only that but the tab view is difficult to work with for using a fixed, non scrolling list of icons, simply because Android devices come in all shapes and sizes.

Two options that might suite what you are looking for. Create your own RelativeLayout or LinearLayout with the icons inside of the layout. This way you get to choose the size of the action bar every time =) You can have the bar dock either on the top or bottom of any Activity.

If this isn't an option you may be able to add the icons onto the top ActionBar menu itself which doesn't do scrolling. However your icons might not all fit on the main ActionBar which would cause any overflowing icons to get placed into the overflow menu dropdown. =(

To remove the divider spacing between tabs save the following code as a new xml file in your drawable folder such as dividerdrawable.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line" >
    <size
        android:width="0px"
        android:color="@android:color/black"
        android:dashWidth="0px"
        android:dashGap="0px" />
</shape>

and then use that drawable for your tab divider.

<item name="divider">@drawable/dividerdrawable</item>