How to change color of Toolbar back button in Android?

Question

I could not change the color of back button. I am using toolbar material design. In my app I am applying black background of tool bar but the back design is being black by default that's why I just want to change the color of this back button. Please give me solutions.

Thank You

Answer 1

You can add a style to your styles.xml,

<style name="ToolbarTheme" parent="@style/ThemeOverlay.AppCompat.ActionBar">
  <!-- Customize color of navigation drawer icon and back arrow --> 
  <item name="colorControlNormal">@color/toolbar_color_control_normal</item>
</style>

and add this as theme to your toolbar in toolbar layout.xml using app:theme , check below

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:theme="@style/ToolbarTheme" >
</android.support.v7.widget.Toolbar>

Answer 2

use this style

<style name="Theme.MyFancyTheme" parent="android:Theme.Holo">
    <item name="android:homeAsUpIndicator">@drawable/back_button_image</item>
</style>

Answer 3

Here is the simplest way of achieving Light and Dark Theme for Toolbar.You have to change the value of app:theme of the Toolbar tag

• For Black Toolbar Title and Black Up arrow , your toolbar should implement following theme:

app:theme="@style/ThemeOverlay.AppCompat.Light"

• For White Toolbar Title and White Up arrow , your toolbar should implement following theme:

app:theme="@style/ThemeOverlay.AppCompat"

Answer 4

对于白色工具栏标题和白色向上箭头，请使用以下主题：

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

Answer 5

Use this:

<style name="BaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="colorControlNormal">@color/white</item> 
</style>

Answer 6

Tried all suggestions above. The only way that I managed to change the color of navigation icon default Back button arrow in my toolbar is to set colorControlNormal in base theme like this. Probably due to the fact that the parent is using Theme.AppCompat.Light.NoActionBar

<style name="BaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="colorControlNormal">@color/white</item> 
  //the rest of your codes...
</style>

Answer 7

Try this,

final Drawable upArrow = getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
upArrow.setColorFilter(getResources().getColor(R.color.grey), PorterDuff.Mode.SRC_ATOP);
getSupportActionBar().setHomeAsUpIndicator(upArrow);

Answer 8

Just use the MaterialToolbar and override the default colors:

    <com.google.android.material.appbar.MaterialToolbar
        style="@style/Widget.MaterialComponents.Toolbar.Primary"
        android:theme="@style/MyThemeOverlay_Toolbar"
        ..>

with:

  <style name="MyThemeOverlay_Toolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
    <!-- color used by navigation icon and overflow icon -->
    <item name="colorOnPrimary">@color/...</item>
  </style>

If you are using the androidx.appcompat.widget.Toolbar or the MaterialToolbar with the default style ( Widget.MaterialComponents.Toolbar ) you can use:

<androidx.appcompat.widget.Toolbar
    android:theme="@style/MyThemeOverlay_Toolbar2"

with:

  <style name="MyThemeOverlay_Toolbar2" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
    <!-- This attributes is used by title -->
    <item name="android:textColorPrimary">@color/white</item>

    <!-- This attributes is used by navigation icon and overflow icon -->
    <item name="colorOnPrimary">@color/secondaryColor</item>
  </style>

Answer 9

You don't have to change style for it. After setting up your toolbar as actionbar, You can code like this

android.getSupportActionBar().setDisplayHomeAsUpEnabled(true);
android.getSupportActionBar().setHomeAsUpIndicator(R.drawable.back);
//here back is your drawable image

But You cannot change color of back arrow by this method

Answer 10

You can use your own icon by using app:navigationIcon and for the title color app:titleTextColor

Example:

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        android:background="@color/colorPrimary"
        app:navigationIcon="@drawable/ic_arrow_back_white_24dp"
        app:titleTextColor="@color/white" />

Answer 11

I think if theme should be generated some problem but its dynamically set black arrow.So i Suggested try this one.

Drawable backArrow = getResources().getDrawable(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
backArrow.setColorFilter(getResources().getColor(R.color.md_grey_900), PorterDuff.Mode.SRC_ATOP);
getSupportActionBar().setHomeAsUpIndicator(backArrow);

Answer 12

If you want white back button (←) and white toolbar title, follow this:

<android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    </android.support.design.widget.AppBarLayout>

Change theme from Dark to Light if you want black back button (←) and black toolbar title.

Answer 13

To style the Toolbar on Android 21+ it's a bit different.

<style name="DarkTheme.v21" parent="DarkTheme.v19">
        <!-- toolbar background color -->
        <item name="android:navigationBarColor">@color/color_primary_blue_dark</item>
        <!-- toolbar back button color -->
        <item name="toolbarNavigationButtonStyle">@style/Toolbar.Button.Navigation.Tinted</item>
    </style>

    <style name="Toolbar.Button.Navigation.Tinted" parent="Widget.AppCompat.Toolbar.Button.Navigation">
        <item name="tint">@color/color_white</item>
    </style>

Answer 14

I did it this way using the Material Components library:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <item name="drawerArrowStyle">@style/AppTheme.DrawerArrowToggle</item>
</style>

<style name="AppTheme.DrawerArrowToggle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="color">@android:color/white</item>
</style>

Answer 15

I am using <style name="BaseTheme" parent="Theme.AppCompat.Light.NoActionBar> theme in my android application and in NoActionBar theme, colorControlNormal property is used to change the color of navigation icon default Back button arrow in my toolbar

styles.xml

<style name="BaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="colorControlNormal">@color/your_color</item> 
</style>

Answer 16

You can add this code into your java class. But you must create a vector asset before, so you can customize your arrow back.

actionBar.setHomeAsUpIndicator(R.drawable.ic_arrow_back_black_24dp);

Answer 17

Simple and no Worries

 <?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:titleTextColor="@color/white"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

        <include layout="@layout/testing" />

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

Answer 18

Programmatically we can achieve using below code. No need to add our own back icon as suggested by many others.

private void initToolBar(String title) {
    toolbar = findViewById(R.id.toolbar);
    toolbar.setTitle(title);
    toolbar.setTitleTextColor(getResources().getColor(R.color.gold));
    setSupportActionBar(toolbar);


    // add back arrow to toolbar
    if (getSupportActionBar() != null) {
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setDisplayShowHomeEnabled(true);
        Drawable nav = toolbar.getNavigationIcon();
        if(nav != null) {
            nav.setTint(getResources().getColor(R.color.gold));
        }
    }
}

Please note toolbar.getNavigationIcon() if requested before getSupportActionBar().setDisplayHomeAsUpEnabled(true); it won't work.

Answer 19

对于白色工具栏标题和白色向上箭头，请使用以下主题：

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

Answer 20

I am using navigationIconTint property is used to change the color of navigation icon default Back button arrow in my toolbar

styles.xml

<style name="AppTheme.ToolbarStyle" parent="Widget.MaterialComponents.Toolbar.Surface">
      <item name="titleCentered">true</item>
      <item name="titleTextColor">?attr/colorOnSurface</item>
      <item name="navigationIconTint">?attr/colorOnSurface</item>
</style>

Answer 21

If you want system back color in white then you can use this code

<com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:elevation="0dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar_notification"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:contentInsetLeft="0dp"
            app:contentInsetStart="0dp"
            app:contentInsetStartWithNavigation="0dp">

            <include layout="@layout/action_bar_notification" />
        </androidx.appcompat.widget.Toolbar>
    </com.google.android.material.appbar.AppBarLayout>

Note:- android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" is key

The paste is in your activity where you want to show back button on action bar

final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar_notification);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowHomeEnabled(false);