Search code examples
androidandroid-support-libraryandroid-appcompatmaterial-designandroid-toolbar

How to show action items at the bottom using Toolbar


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.


Solution

  • 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