Change toolbar back arrow color

Question

Hi. In the picture above you can see a back arrow and a (part of) title. I changed the title color using the attached .xml code. But I want to color the back arrow to white too.

I read some answer on the internet, but they look too complicated for such a simple question.

Is the any simple why to do it?

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="fill_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        app:titleTextColor="@android:color/white"/>

import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
//...

public class LoginActivity extends AppCompatActivity {
    protected void onCreate(Bundle savedInstanceState) {

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        ActionBar actionBar = getSupportActionBar();
        actionBar.setDisplayHomeAsUpEnabled(true);
      //...
    }
    //...
}

Gabriele Mariotti · Accepted Answer · 2020-06-06T16:09:41.290

You can override the theme in your Toolbar.
With a Material Components theme:

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

with:

  <style name="MyThemeOverlay_Toolbar2" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">

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

With an AppCompat theme:

<android.support.v7.widget.Toolbar
  android:theme="@style/myToolbarTheme" 
  ...
>

Then in your theme you can define the colorControlNormal attribute:

   <style name=""  parent="ThemeOverlay.AppCompat.Dark.ActionBar">
      ....
      <item name="colorControlNormal">@color/myColor</item>  
   </style>

score 6 · Answer 2 · answered Aug 21 '18 at 09:51

Be mindful of the theme you use. If you copied your ToolBar code from https://developer.android.com/training/appbar/setting-up, then you have this:

<android.support.v7.widget.Toolbar
   android:id="@+id/my_toolbar"
   android:layout_width="match_parent"
   android:layout_height="?attr/actionBarSize"
   android:background="?attr/colorPrimary"
   android:elevation="4dp"
   android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
   app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

Based on @Gabriele's answer (upvoted), I had to take out the android:theme="@style/ThemeOverlay.AppCompat.ActionBar" attribute and put it in styles.xml then customize the colorControlNormal attribute like so:

<style name="ToolBarTheme"  parent="ThemeOverlay.AppCompat.ActionBar">
    <item name="colorControlNormal">@color/white</item>
</style>

Back to my Toolbar declaration, I modified as below:

<android.support.v7.widget.Toolbar
   ...
   android:theme="@style/ToolBarTheme"
   />

Cheers!

Finally got this working. I did not have any toolbar component defined in my layout but use the supportactionbar. But using `actionBarTheme` in my theme and `colorControlNormal` the back button is now colored as I want. — A.W., Nov 27 '20 at 11:15

score 0 · Answer 3 · edited Sep 26 '20 at 12:02

For me I'm using my own drawable back arraw.

first add this to your toolbar

  <androidx.appcompat.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:title="Your Title"
    app:navigationIcon="@drawable/ic_back"
    app:popupTheme="@style/AppTheme.PopupOverlay"
    >
</androidx.appcompat.widget.Toolbar>

as you can see

app:navigationIcon="@drawable/ic_back"

is the key to change the arraw as you want, and here is how it looks like

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="24dp"
android:width="24dp"
android:viewportWidth="24"
android:autoMirrored="true"
android:viewportHeight="24">
<path android:fillColor="#C87BB3" android:pathData="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z" />

it is a vector

Change toolbar back arrow color

3 Answers3

Linked