Introduction

In Android Material-themed apps, the toolbar back arrow color is controlled by tinting the navigation icon, usually through theme attributes or toolbar configuration. Developers often run into inconsistent color behavior across activities because tint is set in one screen but overridden by theme overlays or night mode in another.

A reliable solution is to define color at theme level when possible, and only apply programmatic tint when screen-specific override is needed.

Core Sections

1. Theme-based approach (preferred)

With Material Components, set toolbar icon tint via theme attributes.

1<!-- themes.xml -->
2<style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
3    <item name="colorOnSurface">@color/nav_icon_color</item>
4</style>

Then ensure toolbar style uses this color for navigation icon tint where supported by your component/style setup.

For many setups, setting colorOnSurface / text appearance and toolbar style is enough to produce consistent icon tint in light/dark modes.

2. Programmatic tint on Toolbar

If you need per-screen customization:

1import androidx.core.graphics.drawable.DrawableCompat
2
3val drawable = supportActionBar?.homeAsUpIndicator
4if (drawable != null) {
5    val wrapped = DrawableCompat.wrap(drawable.mutate())
6    DrawableCompat.setTint(wrapped, getColor(R.color.back_arrow_red))
7    supportActionBar?.setHomeAsUpIndicator(wrapped)
8}

Or when using MaterialToolbar directly:

val icon = toolbar.navigationIcon
icon?.mutate()?.setTint(getColor(R.color.back_arrow_red))

Set this after toolbar is attached as support action bar.

3. XML toolbar-level tint

You can specify navigation icon and tint in layout:

1<com.google.android.material.appbar.MaterialToolbar
2    android:id="@+id/toolbar"
3    android:layout_width="match_parent"
4    android:layout_height="wrap_content"
5    app:navigationIcon="@drawable/ic_arrow_back"
6    app:navigationIconTint="@color/back_arrow_red" />

This is clean for static styling and easy to maintain in UI definitions.

4. Handling night mode and dynamic theme changes

Use color resources with day/night variants:

1<!-- res/color/back_arrow_red.xml -->
2<selector xmlns:android="http://schemas.android.com/apk/res/android">
3    <item android:color="@color/red_300" android:state_enabled="false"/>
4    <item android:color="@color/red_600"/>
5</selector>

Then verify in both themes and with edge-to-edge status bar changes, since contrast can make arrows appear wrong even with correct tint value.

Common Pitfalls

• Tinting one toolbar instance programmatically but expecting the change globally across activities.
• Applying tint before toolbar/action bar initialization and seeing no effect.
• Ignoring day/night resource variants, producing low-contrast icons in dark theme.
• Mutating shared drawable without mutate(), causing unintended tint changes elsewhere.
• Styling with mixed AppCompat/Material theme parents that override icon color unexpectedly.

Summary

To change back-arrow color in Material Theme, prefer theme-level styling for consistency and use programmatic tint only for screen-specific overrides. Ensure toolbar initialization order is correct, use mutate() when tinting drawables, and validate results in light/dark themes. Consistent theming strategy prevents icon-color drift across your app.

In multi-module Android apps, centralize toolbar theming in a shared design system module. If each feature module tints navigation icons independently, visual consistency drifts over time. Shared styles and helper APIs make behavior uniform and simplify global theme updates. Include screenshot tests for representative screens in both light and dark modes to catch regressions early.

Also check accessibility contrast for the navigation icon against app bar background. A technically correct tint can still fail usability if contrast is low in certain dynamic-color combinations. Integrating contrast checks into design review helps ensure the back arrow remains visible and usable across devices and themes.

If your app supports runtime theme switching, ensure navigation icon tint updates when configuration changes occur. Caching old drawables without retinting can leave back arrows with stale colors after theme transitions.

In Compose-interoperable projects, verify consistency between XML toolbar screens and Compose top app bars. Users notice navigation-icon mismatch immediately, so cross-UI parity should be part of visual QA checklists.

Finally, avoid hardcoding colors directly in feature code. Referencing semantic design tokens (colorOnSurface, colorPrimary) keeps your navigation icon aligned with broader design evolution.

Small icon theming details have outsized impact on perceived polish.

Treat navigation icon styling as part of system-level UI quality.

Consistency matters across all screens.