How to show action items at the bottom using Toolbar

Question

main.xml

<item
    android:id="@+id/action_back"
    android:orderInCategory="100"
    app:showAsAction="always"
    android:icon="@drawable/ic_action_back"
    android:title="@string/back"/>

<item
    android:id="@+id/action_save"
    android:orderInCategory="100"
    app:showAsAction="always"
    android:icon="@drawable/ic_action_save"
    android:title="@string/save"/>

<item
    android:id="@+id/action_sort"
    android:orderInCategory="100"
    app:showAsAction="always"
    android:icon="@drawable/ic_action_sort_dark"
    android:title="@string/sort"/>

<item
    android:id="@+id/action_new"
    android:orderInCategory="100"
    app:showAsAction="always"
    android:icon="@drawable/ic_new"
    android:title="@string/new_menu"/>

Manifest.xml

<activity
    android:name="com.app.FileFragmentActivity"
    android:uiOptions="splitActionBarWhenNarrow"
    android:label="@string/app_name" >
</activity>

Output:

Requirement:

I want to show action items at the bottom like in the two screenshots above (marked in red).
I am using Toolbarusing appcompat-v7 library.

Bogtrotter

I think this method could be work for you @Riser #29808244 – Popple

Answer 1

As stated in this post (click) android:uiOptions="splitActionBarWhenNarrow" has been removed in Lollipop. Though this is not that big of a deal since you can simply use two Toolbars - one at the top and one at the bottom.

Following some basic example code:

Layout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_top"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize" />

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_bottom"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:background="?attr/colorPrimary"
        android:layout_alignParentBottom="true"
        android:minHeight="?attr/actionBarSize" />

    <LinearLayout
        android:layout_below="@id/toolbar_top"
        android:layout_above="@id/toolbar_bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</RelativeLayout>

Code

private void initToolbars() {
    Toolbar toolbarTop = (Toolbar) findViewById(R.id.toolbar_top);
    setSupportActionBar(toolbarTop);

    Toolbar toolbarBottom = (Toolbar) findViewById(R.id.toolbar_bottom);
    toolbarBottom.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem item) {
            switch(item.getItemId()){
                case R.id.action_settings:
                    // TODO
                    break;
                // TODO: Other cases
            }
            return true;
        }
    });
    // Inflate a menu to be displayed in the toolbar
    toolbarBottom.inflateMenu(R.menu.menu_main);
}

Result

Note: Handling when to show two Toolbars or just one is something you have to do manually

Marmoset

i am trying your code. but i have problem with setSupportActionBar(toolbarTop). as because i am using this in fragment. – Bogtrotter

Hi, a Fragment is part of an Activity. So you should call this in your Activity. – Marmoset

Well the simplest option would be to write a public method (setToolbarTitle(String title)) in your activity which receives the String and sets it via toolbar.setTitle(title). In your Fragment you call ((MyActivity)getActivity).setToolbarTitle("Lorem ipsum"); – Marmoset

thanks it works perfectly. i have another small problem. can we show bottom action items from left side? – Bogtrotter

I'm not aware of an option how you can do this. At least the android:gravity doesn't do anything to the action menu items. Sorry. – Marmoset

is there anyway to show all the items without the overflow ? like his screenshot ? – Janusfaced

@Janusfaced as long as you add app:showAsAction="ifRoom" to every MenuItem the Overflow shouldn't be visible unless there're too many icons to display. – Marmoset

i did that already but the same result :( even with app:showAsAction="always" i get the the same – Janusfaced

six icons but it still a lot of empty space ... on my test device almost 80% of empty space and the items still in the overflow menu ... look here i posted already a question #30921080 – Janusfaced

i think this method could be work for you @Riser #29808244 – Popple

@RahulMandaliya thanks but its already done and I accept answer. – Bogtrotter

@Marmoset your answer is very good but can you please explain how to align the bottom to right and center ? #33197713 – Kenay

@Kenay As far as I know this isn't possible. You should probably use a custom view which you place inside the bottom toolbar. – Marmoset

@Marmoset I tried in the above link to use custom style like this <style name="ActionButtonStyle" parent="@android:style/Widget.Holo.Light.ActionButton"> <item name="android:minWidth">70dip</item> but it didnt work .. should I use another way ? do you have an answer similar to my need ? or a tutorial – Kenay

@Kenay I just tried this solution and it works. You have to add <item name="android:actionButtonStyle">@style/ActionButtonStyle</item> to the Theme of your app. – Marmoset

@Marmoset I added it in my main menu can you please help me in this ? in this [question] (#33222061) i explained how I added them. tell me where is wrong ? – Kenay

@Marmoset I've used the approach mentioned here. But I have a slight issue. Could you have a look at this and try answering it : #35199338 – Asgard

@ArjunIssar Have a look at the comments here. Multiple users had the same issue and as far as I know there's no other solution than using a custom layout and skipping the whole inflateMenu(...) stuff. Sorry. – Marmoset

Is it possible to make this toolbar have the same scrolling behaviour as a toolbar placed on the top (i.e could I swipe downwards to gradually make it drop below the screen and swipe up to make it come back) ? – Verbify

@Verbify I haven't tested it but it should be possible. Maybe already with the default scrolling behavior. If this doesn't work, there's still the option to create a custom behavior for the CoordinatorLayout. – Marmoset

And how to get rid of the right alignment of the buttons on the toolbar? – Changeful

@Changeful That's the default when you are inflating a menu into the Toolbar. I don't think there is an option to get rid of it but you can wrap a custom Layout in the Toolbar and use your own ImageViews. – Marmoset

Answer 2

If you want to make something like this (from the docs)

or this (from your question)

then use a Bottom Navigation Bar rather than a Toolbar. It is now included in the support library and isn't hard to set up. See this answer for the detailed directions:

• How to add a Bottom Navigation Bar

Kepi

Is there something wrong with this answer? I got a downvote but no comment to help me fix anything. – Kepi