AppCompat v7:21 Split Action Bar Broken?

Question

I am currently developing an application in which I use a heavily modified Split Action Bar. Here is a link to the app's current state:

screenshot

You'll notice a transparent action bar up top, with a custom view inflated into it, with a hacked together split action bar on bottom. The bottom view is actually a single action item with a custom view inflated into it and showAlways=true.

Currently I only support SDK v15+ and I don't really plan on changing that, but with the Lollipop AppCompat library that just released, I decided to implement it, so I could get some of that awesomeness in my app.

I've changed my theme to Theme.AppCompat.Light, and my MainActivity now extends ActionBarActivity instead of Activity.

All references to getActionBar have now been switched to getSupportActionBar, and with only those changes, this is what my activity now looks like:

another screenshot

You'll notice I got a UI dump from the Device Monitor, and it's shoving the bottom action bar into a weird space and calling that the action bar, and getting rid of my top custom view.

Here is my code for setting up my action bar:

public void initializeActionBar(){
    View customNav = LayoutInflater.from(this).inflate(R.layout.action_bar_top, null);

    actionBar = getSupportActionBar();
    actionBar.setBackgroundDrawable(getResources().getDrawable(R.drawable.transparent_fifty_percent));

    final PopupWindow window = addPopupWindow();

    actionBarOptions = (ImageView)customNav.findViewById(R.id.options);
    actionBarOptions.setVisibility(View.GONE);
    actionBarOptions.setImageDrawable(app.svgToBitmapDrawable(getResources(), R.raw.vertical_ellipsis, app.scaleByDensity(48)));
    actionBarOptions.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            window.showAsDropDown(actionBarOptions, 0, 0);
        }
    });
    TextView title = (TextView) customNav.findViewById(R.id.screen_title);
    Typeface font1 = Typeface.createFromAsset(getAssets(), "Merriweather-Italic.ttf");

    title.setText("Parsley");
    title.setTypeface(font1);

    actionBar.setCustomView(customNav);
    actionBar.setDisplayShowCustomEnabled(true);
    actionBar.setDisplayShowTitleEnabled(false);
    actionBar.setDisplayShowHomeEnabled(false);
    actionBar.setDisplayUseLogoEnabled(false);

}


@Override
public boolean onCreateOptionsMenu(Menu menu) {
    new MenuInflater(this).inflate(R.menu.test, menu);


    LinearLayout fullMenu = (LinearLayout) menu.findItem(R.id.full_menu).getActionView();


    ViewGroup.LayoutParams params;

    icon1 = (ImageView) fullMenu.findViewById(R.id.action_item1);
    params = icon1.getLayoutParams();
    params.width = getResources().getDisplayMetrics().widthPixels / 4;
    params.height = (int) (48 * getResources().getDisplayMetrics().density);

    icon1.setImageDrawable(app.svgToBitmapDrawable(getResources(), R.raw.shopping_list_icon, app.scaleByDensity(32)));
    icon2 = (ImageView) fullMenu.findViewById(R.id.action_item2);
    icon3 = (ImageView) fullMenu.findViewById(R.id.action_item3);
    icon4 = (ImageView) fullMenu.findViewById(R.id.action_item4);
    icon2.setImageDrawable(app.svgToBitmapDrawable(getResources(), R.raw.recipe_box_icon, app.scaleByDensity(32)));
    icon3.setImageDrawable(app.svgToBitmapDrawable(getResources(), R.raw.icon_search, app.scaleByDensity(32)));
    icon4.setImageDrawable(app.svgToBitmapDrawable(getResources(), R.raw.icon_add, app.scaleByDensity(32)));
    params = icon2.getLayoutParams();
    params.width = getResources().getDisplayMetrics().widthPixels / 4;
    params.height = (int) (48 * getResources().getDisplayMetrics().density);
    params = icon3.getLayoutParams();
    params.width = getResources().getDisplayMetrics().widthPixels / 4;
    params.height = (int) (48 * getResources().getDisplayMetrics().density);
    params = icon4.getLayoutParams();
    params.width = getResources().getDisplayMetrics().widthPixels / 4;
    params.height = (int) (48 * getResources().getDisplayMetrics().density);
    if (!firstLoad) {
        setBottomActionBarActive();
        setActiveTab(0);
    }

    optionsLoaded = true;

    return true;
}

initializeActionBar() is called from onCreate in my activity. Any ideas what I'm doing wrong?

You can create a custom toolbar and place it once above, once below. Please check this post: http://stackoverflow.com/questions/34546160/how-to-enable-split-action-bar/34546493#34546493 — piotrek1543, Dec 31 '15 at 15:04

score 2 · Accepted Answer · answered Oct 29 '14 at 03:51

2

Toolbar should be used. In your case it's one toolbar at the top, and one at the bottom. Check android team blog, they have nice integration guide.

answered Oct 29 '14 at 03:51

user4182277

950
1
6
13

1

Could you link to integration for using two toolbars for a split action bar? – Elli White Oct 29 '14 at 14:41
Just add two toolbars to relative layout. Toolbar is part of your layout and can be used like any other view – user4182277 Oct 29 '14 at 15:11
For those coming here looking for answers, this is as close to a "guide' as I could find on the [android developers blog](http://android-developers.blogspot.com/2014/10/appcompat-v21-material-design-for-pre.html), which is hopefully what @user4182277 was referring to – GrouchyPanda Dec 09 '14 at 00:21
Use two Toolbars. Look here how to do the second SplitToolbar: http://stackoverflow.com/questions/26627612/how-to-center-action-menu-on-toolbar – kotucz Mar 03 '15 at 14:57

KCC · Answer 2 · 2014-12-18T00:22:19.210

1

If you just want your bottom action bar back, you can simply change back to appcompat v7:20 ,and it works for me. The problem is split action bar is no longer being supported in appcomat v7:21.

edited Dec 18 '14 at 00:22

answered Dec 17 '14 at 17:23

KCC

128
2
7

Good catch, do you have a source on them not supporting the split action bar in appcompat 21? – Elli White Dec 18 '14 at 15:50
According to http://commonsware.com/blog/2014/11/18/android-5p0-deprecation-splitactionbarwhennarrow.html and https://code.google.com/p/android/issues/detail?id=77632#c2, split action bar is quietly dropped from appcompat_v7:21. – KCC Dec 21 '14 at 09:39

score 0 · Answer 3 · answered Oct 30 '14 at 19:06

While user482277's solution may work for instances with a more traditional split action bar, utilizing action items, navigation drawer, etc, it didn't quite work for me. What I ended up doing was building a pair of custom (compound really) views to emulate both the top and bottom action bar. I found this situation to work much better, especially with backwards compatibility. I don't have to worry about earlier versions supporting action bar, because at the end of the day, it's just a pair of classes that extend LinearLayout. In addition, I don't have to worry about different screen sizes (particularly tablets) not supporting the split version.

AppCompat v7:21 Split Action Bar Broken?

3 Answers3

Linked