ActionBarSherlock overlapping on tab navigation and ActionMode

Question

I have a strange problem with ActionBarSherlock, using tab navigation and an Action Mode.

Repeat the problem is very simple, I use demo code to generate following example activity:

import com.actionbarsherlock.app.ActionBar;
import com.actionbarsherlock.app.SherlockFragmentActivity;
import com.actionbarsherlock.app.ActionBar.Tab;
import com.actionbarsherlock.view.ActionMode;
import com.actionbarsherlock.view.Menu;
import com.actionbarsherlock.view.MenuItem;

import android.os.Bundle;
import android.support.v4.app.FragmentTransaction;

public class MainActivity extends SherlockFragmentActivity implements ActionBar.TabListener {
    private ActionMode actionMode = null;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        setTheme(com.actionbarsherlock.R.style.Theme_Sherlock);
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        getSupportActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        for (int i = 1; i <= 2; i++) {
            ActionBar.Tab tab = getSupportActionBar().newTab();
            tab.setText("Tab " + i);
            tab.setTabListener(this);
            getSupportActionBar().addTab(tab);
        }

        actionMode = startActionMode(new TestActionMode());
    }

    @Override
    public void onTabSelected(Tab tab, FragmentTransaction ft) {
        // TODO Auto-generated method stub
    }

    @Override
    public void onTabUnselected(Tab tab, FragmentTransaction ft) {
        // TODO Auto-generated method stub
    }

    @Override
    public void onTabReselected(Tab tab, FragmentTransaction ft) {
        // TODO Auto-generated method stub
    }


    private final class TestActionMode implements ActionMode.Callback {

        @Override
        public boolean onCreateActionMode(ActionMode mode, Menu menu) {
            menu.add("Add").setIcon(android.R.drawable.ic_input_add).setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM);
            menu.add("Search").setIcon(android.R.drawable.ic_search_category_default).setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM);

            return true;
        }

        @Override
        public boolean onPrepareActionMode(ActionMode mode, Menu menu) {
            // TODO Auto-generated method stub
            return false;
        }

        @Override
        public boolean onActionItemClicked(ActionMode mode, MenuItem item) {
            // TODO Auto-generated method stub
            return false;
        }

        @Override
        public void onDestroyActionMode(ActionMode mode) {
            // TODO Auto-generated method stub

        }

    }

}

It works correctly on Android 4.0 (tested on real device and emulator), but on Jelly Bean (tested only on emulator) I have the following behavior.

• Application start (portrait mode) and it works correctly;
• I rotate application and it works correctly;
• I rotate again application and now tab navigation and ActionMode are overlapped (https://i.sstatic.net/Zf1VG.png).

Sometimes (but rarely), all works perfectly, especially if I have all animations enable in Dev. Setting (usually I disable all animation).

I'm using ActionBarSherlock 4.4.

Any suggestions would be greatly appreciated, because I really don't understand where I make a mistake.

Thanks and regards.

Answer 1

I recently came across to the same issue. After wasting few days on it, found out that this weird behavior is caused by UX flaw described in this issue and, in fact, has nothing to do with ABS (action bar sherlock).

The most reliable workaround seems to be using reflection to control how action bar should be rendered:

/**
 * On Android 3.0 and above, while using the ActionBar tabbed navigation style, the tabs sometimes appear above the action bar.
 * This helper method allows you to control the 'hasEmbeddedTabs' behaviour.
 * A value of true will put the tabs inside the ActionBar, a value of false will put it above or below the ActionBar.
 *
 * You should call this method while initialising your ActionBar tabs.
 * Don't forget to also call this method during orientation changes (in the onConfigurationChanged() method).
 *
 * @param inActionBar
 * @param inHasEmbeddedTabs
 */
public static void setHasEmbeddedTabs(Object inActionBar, final boolean inHasEmbeddedTabs)
{
        // get the ActionBar class
        Class<?> actionBarClass = inActionBar.getClass();

        // if it is a Jelly Bean implementation (ActionBarImplJB), get the super class (ActionBarImplICS)
        if ("android.support.v7.app.ActionBarImplJB".equals(actionBarClass.getName()))
        {
                actionBarClass = actionBarClass.getSuperclass();
        }

        try
        {
                // try to get the mActionBar field, because the current ActionBar is probably just a wrapper Class
                // if this fails, no worries, this will be an instance of the native ActionBar class or from the ActionBarImplBase class
                final Field actionBarField = actionBarClass.getDeclaredField("mActionBar");
                actionBarField.setAccessible(true);
                inActionBar = actionBarField.get(inActionBar);
                actionBarClass = inActionBar.getClass();
        }
        catch (IllegalAccessException e) {}
        catch (IllegalArgumentException e) {}
        catch (NoSuchFieldException e) {}

        try
        {
                // now call the method setHasEmbeddedTabs, this will put the tabs inside the ActionBar
                // if this fails, you're on you own <img src="http://www.blogc.at/wp-includes/images/smilies/icon_wink.gif" alt=";-)" class="wp-smiley"> 
                final Method method = actionBarClass.getDeclaredMethod("setHasEmbeddedTabs", new Class[] { Boolean.TYPE });
                method.setAccessible(true);
                method.invoke(inActionBar, new Object[]{ inHasEmbeddedTabs });
        }
        catch (NoSuchMethodException e)        {}
        catch (InvocationTargetException e) {}
        catch (IllegalAccessException e) {}
        catch (IllegalArgumentException e) {}
}

The above code was taken from this blog post.