How to change color of the back arrow in the new Material theme?

java

customization

theme-attributes

navigation-icon

byNikita Barsukov·Aug 11, 2024

Fast track to changing the back arrow color in the Material Theme? Set the android:tint in your toolbar's style. Here's a quick setup:

<style name="ToolbarWithBackArrowColor" parent="Widget.MaterialComponents.Toolbar">
    <!-- Don't mind me, just a function acting as a traffic light, determining which way you go -->
    <item name="android:navigationIcon">?attr/homeAsUpIndicator</item>
    <item name="android:tint">@color/custom_back_arrow_color</item>
</style>

Then apply this style to your Toolbar:

<com.google.android.material.appbar.Toolbar
    style="@style/ToolbarWithBackArrowColor" />

Replace @color/custom_back_arrow_color with your specific color resource.

Delving deeper: code customization

Let's get our coding gloves on and delve deeper into all the possible ways to customize the back arrow color.

Changing color via theme attributes

Artists tweak the finest details. We tweak the colorControlNormal within your app theme to make sure all navigation elements have a similar color scheme:

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <!-- This isn't a joke, but it still colors -->
    <item name="colorControlNormal">@color/custom_back_arrow_color</item>
</style>

Changing color in Java/Kotlin

For those who prefer more dynamic color changes during runtime, apply a fresh coat of color with a few lines of Java or Kotlin:

if (toolbar.getNavigationIcon() != null) {
    // Coloring arrows not archers! 🏹
    toolbar.getNavigationIcon().setColorFilter(getResources().getColor(R.color.custom_back_arrow_color), PorterDuff.Mode.SRC_ATOP);
}

Considering API levels

If you're working with API 23 and above, invite abc_ic_ab_back_material to be your drawable resource. Et voilà! your back arrow is theme-ready.

Advanced color-changing methods

Ready to take the "wheel"? Let's drive through the more advanced scenarios of changing back arrow colors.

Custom drawables

If you're looking to add custom drawables for different versions in your resources, here's how to do it:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Arrow so cool, even Robin Hood would be jealous -->
    <item android:drawable="@drawable/ic_arrow_back_black_24dp" android:tint="@color/custom_back_arrow_color" android:state_enabled="true" />
</selector>

Color changes using DrawerArrowStyle

Keep the back arrow color in line with your app's theme using DrawerArrowStyle. You can define the color resource once and let your whole app benefit from the change:

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <!-- This is not a drill. We're setting the arrow color -->
    <item name="drawerArrowStyle">@style/MyDrawerArrowToggle</item>
</style>

<style name="MyDrawerArrowToggle" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="color">@color/custom_back_arrow_color</item>
</style>

Why stop at the back arrow when you have the whole navigation icon to experiment with:

<style name="ToolbarIconColor" parent="Widget.MaterialComponents.Toolbar">
    <!-- Custom icons are in fashion, you know -->
    <item name="android:navigationIcon">@drawable/my_custom_icon</item>
    <item name="android:tint">@color/my_custom_color</item>
</style>