Geek Answers Handbook

Is it possible to have both a back button and a menu on the Android toolbar?

In the Amazon iOS app, they combined both the buttons and the menu buttons. Is it possible to implement them in Android?

Amazon iOS App

+6
source share
4 answers

You can create your own toolbar design in XML format 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 install listeners to perform tasks such as openDrawer and the previous goto 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); } });
+11
source

If you want something special to create it yourself :)

If you use the latest design library, you can create your own toolbar and add any element there.

I did this in 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" />

+1
source

you can create a custom layout toolbar as follows:

 <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>
+1
source

Yes, it’s absolutely possible, you just need to hide the default toolbar by doing the following Styles.xml :

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

Then you need to create your own XML toolbar file to 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 should add this toolbar to your add toolbar as shown 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, for example:

  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 as shown below so you can access the contents of the toolbar in any snippet

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

More articles:


All Articles