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?

Please post a picture and/or XML layout showing *exactly* what your entire toolbar needs to look like when finished. This is important to the solution. — kris larson, Mar 22 '16 at 11:24
it should similar to amazon app ios . i already posted screen shot please check it — GuruPrasath S, Mar 23 '16 at 09:01
In short , yes its absolutely possible. So now go and read a little and try to implement it. — Gaurav Sarma, Mar 24 '16 at 09:14

score 11 · Answer 1 · answered Mar 24 '16 at 09:35

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);
    }
});

AnZ · Answer 2 · 2016-05-23T14:21:02.837

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" />

score 1 · Answer 3 · answered Mar 28 '16 at 12:24

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>

score 0 · Answer 4 · answered Mar 29 '16 at 05:36

Yes absolutely possible you just have to hide the default toolbar by doing following in your Styles.xml :

 <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

Then you have to create youe own xml file of toolbar let's name it custom_toolbar.xml

 <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="?attr/actionBarSize"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp">

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

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

    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginRight="10dp"
        android:textColor="@android:color/black"
        android:textSize="@dimen/actionbar_textsize"
        android:textStyle="bold" />
</android.support.v7.widget.Toolbar>

Then you have to add that toolbar in your activity add toolbar like below

  <RelativeLayout 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"
    tools:context="betasoft.com.blankblank.ui.ui.activity.SignUp">

    <include
        android:id="@+id/toolbar"
        layout="@layout/custom_toolbar" />

    <FrameLayout
        android:id="@+id/main_data"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/toolbar />

</RelativeLayout>

then you can access the toolbar in your activity like :

 Toolbar mToolBar;
 ImageView mToolBarBack,mToolBarMenu;
TextView mToolBarTitle;

//Inside onCreate

mToolBar = (Toolbar) findViewById(R.id.toolbar);
mToolBarBack = (ImageView) mToolBar.findViewById(R.id.toolbar_back);
mToolBarTitle = (TextView) mToolBar.findViewById(R.id.toolbar_title);
mToolBarMenu= (TextView) mToolBar.findViewById(R.id.menu_button);

// then create a public method so like below so that you can access the toolbar content at any fragment

 public void setActionBarTitle(String title) {
        mToolBarTitle.setText(title);
    }

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

4 Answers4