How to center toolbar back button?

Question

I'm having a problem trying to center the back button on the support toolbar. I'm using it inside an ActionBarActivity.

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:toolbar="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    toolbar:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    toolbar:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

And set the up navigation inside the Activity's onCreate() like this:

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

getSupportActionBar().setTitle(R.string.title_activity_scanner);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

However, what I'm getting is this:

As you can see the back button is misplaced

Edit: The problem seems to lie in a custom value for ?attr/actionBarSize set to 40dp, however, it turns out now, that it's the title that is misplaced instead.

One of the action I think disable that back button and put a button widget inside and align it as you want. Hope it helps!!! — , Apr 27 '15 at 08:41
can you remove minHeight tag and add height as "?attr/actionBarSize" instead of "wrap_content" — Riyaz Ahamed, Apr 27 '15 at 09:00
@Viren I would like to avoid rediscovering the wheel if possible — mewa, Apr 27 '15 at 09:03
@RiyazAhamed please check updated question, it's actually the title that make the toolbar grow, but the back button should adapt as well — mewa, Apr 27 '15 at 09:04

score 101 · Accepted Answer · answered Jun 21 '15 at 12:07

101

From the developer.android.com :

Toolbar supports a more focused feature set than ActionBar. From start to end, a toolbar may contain a combination of the following optional elements:

A navigation button. This may be an Up arrow, navigation menu toggle, close, collapse, done or another glyph of the app's choosing. This button should always be used to access other navigational destinations within the container of the Toolbar and its signified content or otherwise leave the current context signified by the Toolbar. The navigation button is vertically aligned within the Toolbar's minimum height, if set.

So if you set minHeight attribute the same as your toolbar height (layout_height ), the back arrow will be centered vertically.

answered Jun 21 '15 at 12:07

Rick Sanchez

4,528
2
27
53

1

I was using a custom `toolbar:theme` so my problem was solved by removing `@android:/abc_action_bar_stacked_max_height` from my `toolbar's theme` – Sheraz Ahmad Khilji Nov 03 '15 at 06:36
1

If use support v7 before 24,we can set `maxButtonHeight` equal `android:minHeight ` make a vertical center effect. After v7 version >=24+,we can set attr `buttonGravity` . – act262 May 23 '17 at 09:50
2

Had to add `android:minHeight="@null"` to cancel out the `minHeight` coming from the toolbar style `style="@style/Widget.MaterialComponents.Toolbar"` – Afilu Feb 05 '19 at 14:04

Ivan Bartsov · Answer 2 · 2021-12-20T05:03:28.467

15

(2020)

In case you have a non-standard toolbar height, to center the back button nowadays (2k20) with androidx Toolbar you can just use the buttonGravity property.

This allows you to use wrap_content instead of a specific height (minHeight doesn't allow you to do so):

<androidx.appcompat.widget.Toolbar
   app:buttonGravity="center_vertical"
   android:layout_height="wrap_content"
   ... />

edited Dec 20 '21 at 05:03

answered Jun 25 '20 at 12:00

Ivan Bartsov

19,664
7
61
59

Wow, thank you! I wonder if there's a minimum API version for this? – LuckMan Dec 06 '20 at 03:36
@LuckMan I haven't seen any specific requirements for the Toolbar itself, I think it's safe to assume that `androidx.widget.*` work on API 14+ (Android 4.0) -- AFAIK, that was the requirement of the pre-androix support lib. – Ivan Bartsov May 25 '21 at 05:05

score 2 · Answer 3 · answered Apr 27 '15 at 09:35

Inside ActionBarActivity

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
  setSupportActionBar(toolbar);
  getSupportActionBat().setTitle("Hello World"); 
  getSupportActionBar().setDisplayHomeAsUpEnabled(true);
  getSupportActionBar().setHomeButtonEnabled(true);

Layout code :

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/primary"
        app:theme="@style/ToolbarTheme"
        app:popupTheme="@style/Theme.AppCompat"/>

And style :

 <style name="AppTheme.Base" parent="Theme.AppCompat.Light">
    <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primaryDark</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowActionBar">false</item>
    <item name="windowActionBar">false</item>
</style>

<style name="AppTheme" parent="AppTheme.Base">

Remember that toolbar is just viewgroup, so u can style it in any way u like. Here is image link : Toolbar sample

Hope it helps.

score 1 · Answer 4 · edited Apr 27 '15 at 09:23

Best way to achieve this is remove regular Back button from the toolbar and add a custom ImageButton in your XML layout and set image to it. You can place this ImageButtton wherever you want on the toolbar.

Your activity layout code should be something like this.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

    <ImageButton
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:id="@+id/button"
        android:src="@drawable/attach_icon"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

score 0 · Answer 5 · edited May 23 '17 at 11:54

0

Piggybacking off of @Rick Sanchez answer - if you know the size of the Toolbar's minHeight attribute you can then use:

android:gravity="top"
app:titleMarginTop="@dimen/margin_to_center"

in the Toolbar to center the text. If you are using android:minHeight="?actionBarSize" then this would be about 13p

edited May 23 '17 at 11:54

Community

1
1

answered Sep 28 '15 at 19:59

AllDayAmazing

2,383
1
24
25

score 0 · Answer 6 · answered Apr 23 '16 at 15:23

For me, none of the solutions worked. In my case the problem was the margin I applied:

 <android.support.v7.widget.Toolbar
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     ... >

     <View
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="10dp" />

 </android.support.v7.widget.Toolbar>

After applying it to the toolbar directly, the button was centered vertically:

 <android.support.v7.widget.Toolbar
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_marginBottom="10dp"
     android:layout_marginTop="10dp"
     ... >

     <View
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

 </android.support.v7.widget.Toolbar>

score 0 · Answer 7 · answered Apr 25 '17 at 05:02

@Rick Sanchez answer is work,setup Toolbar's layout_height the same as minHeight

I found in Toolbar constructor have a field can setup button gravity, mButtonGravity = a.getInteger(R.styleable.Toolbar_buttonGravity, Gravity.TOP);

,but v7 support Toolbar can not setup, mButtonGravity = Gravity.TOP;

score 0 · Answer 8 · answered Dec 15 '18 at 12:40

0

make your button size 56dp and set scaleType to center with no margins on Appbar Make sure your icon is 24x24 dimensions

answered Dec 15 '18 at 12:40

Mahdi Astanei

1,905
1
17
30

score 0 · Answer 9 · answered Mar 25 '21 at 14:07

0

I was using

  <style name="MyActionBar" parent="@style/Widget.AppCompat.ActionBar">

when I should've been using

 <style name="MyActionBar" parent="@style/Widget.AppCompat.Toolbar">

answered Mar 25 '21 at 14:07

MSpeed

8,153
7
49
61

How to center toolbar back button?

9 Answers9

Linked