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:

enter image description here

Requirement:

enter image description here

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.

I think this method could be work for you @Riser http://stackoverflow.com/questions/29807744/how-can-i-align-android-toolbar-menu-icons-to-the-left-like-in-google-maps-app — Rahul Mandaliya, Oct 03 '15 at 10:28

score 51 · Accepted Answer · edited May 23 '17 at 11:46

51

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

picture showing result

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

edited May 23 '17 at 11:46

Community

1
1

answered Dec 15 '14 at 18:31

reVerse

35,075
22
89
84

i am trying your code. but i have problem with setSupportActionBar(toolbarTop). as because i am using this in fragment. – Sagar Maiyad Dec 16 '14 at 04:54
Hi, a `Fragment` is part of an `Activity`. So you should call this in your Activity. – reVerse Dec 16 '14 at 09:06
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");` – reVerse Dec 16 '14 at 09:50
1

thanks it works perfectly. i have another small problem. can we show bottom action items from left side? – Sagar Maiyad Dec 19 '14 at 09:16
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. – reVerse Dec 19 '14 at 09:30
1

is there anyway to show all the items without the overflow ? like his screenshot ? – elpazio Jun 18 '15 at 15:26
@elpazio 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. – reVerse Jun 18 '15 at 16:12
i did that already but the same result :( even with app:showAsAction="always" i get the the same – elpazio Jun 18 '15 at 16:27
1

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 http://stackoverflow.com/questions/30920580/android-toolbar-without-overflow-menu/30920637#30920637 – elpazio Jun 18 '15 at 23:07
i think this method could be work for you @Riser http://stackoverflow.com/questions/29807744/how-can-i-align-android-toolbar-menu-icons-to-the-left-like-in-google-maps-app – Rahul Mandaliya Oct 03 '15 at 10:29
@RahulMandaliya thanks but its already done and I accept answer. – Sagar Maiyad Oct 03 '15 at 15:09
@reVerse your answer is very good but can you please explain how to align the bottom to right and center ? http://stackoverflow.com/questions/33197213/styling-bottom-action-icon-postion-and-background-color – Moudiz Oct 20 '15 at 08:15
@Moudiz As far as I know this isn't possible. You should probably use a custom view which you place inside the bottom toolbar. – reVerse Oct 20 '15 at 08:24
@reVerse I tried in the above link to use custom style like this – Moudiz Oct 20 '15 at 08:28
@Moudiz I just tried this solution and it works. You have to add `@style/ActionButtonStyle` to the Theme of your app. – reVerse Oct 20 '15 at 08:49
@reVerse I added it in my main menu can you please help me in this ? in this [question] (http://stackoverflow.com/questions/33221561/action-toolbar-icon-design-centered) i explained how I added them. tell me where is wrong ? – Moudiz Oct 20 '15 at 09:38
@reVerse I've used the approach mentioned here. But I have a slight issue. Could you have a look at this and try answering it : http://stackoverflow.com/questions/35198838/action-buttons-do-not-cover-the-entire-toolbar – Arjun Issar Feb 04 '16 at 11:09
@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. – reVerse Feb 04 '16 at 11:18
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) ? – user1841702 Aug 09 '16 at 11:55
@user1841702 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. – reVerse Aug 09 '16 at 11:58
And how to get rid of the right alignment of the buttons on the toolbar? – Dmitry May 12 '18 at 21:39
@Dmitry 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`. – reVerse May 13 '18 at 08:17

score 1 · Answer 2 · answered Sep 16 '17 at 08:29

1

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

answered Sep 16 '17 at 08:29

Suragch

484,302
314
1,365
1,393

Is there something wrong with this answer? I got a downvote but no comment to help me fix anything. – Suragch Jan 12 '19 at 16:37