Is it possible to have both back and menu button in toolbar Android?

Question

In iOS Amazon app, they implemented both back and menu button together. Is it possible to implement the same in Android?

Answer 1

You can create a custom toolbar design in XML as

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:minHeight="?attr/actionBarSize">

    <ImageView
       android:id="@+id/backButton"
       android:background="@drawable/back_icon"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

    <ImageView
       android:id="@+id/homeButton" 
       android:background="@drawable/menu_icon"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />
</android.support.v7.widget.Toolbar>

Then set listeners to perform task such as openDrawer and goto previous screen.

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
ImageView homeButton = (ImageView) toolbar.findViewById(R.id.homeButton);

homeButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
       drawerLayout.openDrawer(GravityCompat.START);
    }
});

Answer 2

you can create a Toolbar with custom layout like this:

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/main_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize">

    <ImageView
       android:id="@+id/backButton"
       android:background="@drawable/ic_back_icon"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

    <ImageView
       android:id="@+id/hamburgerButton" 
       android:background="@drawable/ic_home_icon"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />
 <ImageView
       android:id="@+id/logo" 
       android:background="@drawable/logo"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />
</android.support.v7.widget.Toolbar>

Answer 3

If you want something special create it by your own :)

If you're using latest design library its possible to create your custom toolbar panel and add any item you want there.

I was achieving that behaviour this way:

main_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">

<!-- this is top bar where you need to add both drawer toggle and back button-->
<include
    layout="@layout/app_bar_navigation"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<!-- Content of sliding menu-->
<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="end"
    android:background="@color/primary_blue_dark"
    android:fitsSystemWindows="true">

    <!-- Custom menu list. Feel free to customize it as listview-->
    <ListView
        android:id="@+id/lv_menu"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</android.support.design.widget.NavigationView>

layout/app_bar_navigation.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="@dimen/nav_header_size_pre5"
    android:background="@color/primary_blue_dark"
    android:padding="6dp">

    <!-- This is where you need to place those items. I had title and imageview there. You may add anything-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:layout_centerHorizontal="true"
        android:gravity="center">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:src="@drawable/ic_logo"
            android:adjustViewBounds="true"/>

        <TextView
            android:id="@+id/tv_app_logo"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="@string/app_name"
            android:layout_marginLeft="@dimen/activity_horizontal_margin"
            android:textColor="@color/primary_yellow"
            android:textSize="@dimen/middle_text"
            android:gravity="center"/>
    </LinearLayout>


    <ImageView
        android:id="@+id/iv_drawer_open"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:src="@drawable/ic_drawer_toggle"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:tint="@color/primary_white"/>
</RelativeLayout>

<!-- This is main content-->
<include layout="@layout/content_navigation" />