Tint Navigation Icon in Toolbar

Question

How to tint menu icons is already covered a few times, like here: Toolbar icon tinting on Android

Additionally to this solution there is still the problem of the navigation icon. Applying a Theme(Overlay) to your Toolbar just tints the text and the whitelisted icons (see: https://stackoverflow.com/a/26817918/2417724)

If you set a custom icon (which happens to be quite easy the case, as you need to change it if you don't want to display the default back arrow) then this custom icon does not get tinted.

How do you handle your Icons then? All my icons are per default black and I don't want to have special white versions just to use them in the Toolbar then.

Answer 1

The appcompat navigation button - which is simply an AppCompatImageButton - can be styled through the toolbarNavigationButtonStyle attribute. The default style for that in the AppCompat themes is Widget.AppCompat.Toolbar.Button.Navigation, and we can extend that style to add a tint attribute value. For example:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    ...

    <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/nav_button_tint</item>
</style>

---

There are a couple of caveats to be aware of when using this method.

Prior to support library version 25.4.0, AppCompatImageButton did not offer its own tint attribute, and therefore a tint attribute in the app's namespace will not apply (and just won't exist, unless defined elsewhere). It is necessary to use the platform android:tint attribute if using support library version 25.3.0 or earlier.

Unfortunately, this leads to another catch, in that the platform tint prior to Lollipop (API level 21) can handle only simple, single color values, and using a ColorStateList (<selector>) resource value will cause an Exception to be thrown. This poses no problems if the android:tint value is a simple color, but it is often desired to tint the navigation icon to match another theme color attribute, which may very well be a ColorStateList. In this case, it would be necessary to create separate styles in res/values/ and res/values-21/, specifying a simple color value for android:tint in res/values/.

For example, if tinting to match the theme's primary text color:

res/values/styles.xml

<item name="android:tint">@color/normal_text_color</item>

res/values-v21/styles.xml

<item name="android:tint">?android:textColorPrimary</item>

You need only concern yourself with the notes above if you're stuck using a support library version less than 25.4.0.

Answer 2

To effectively set the tint color of the navigation icon programmatically you need to set the drawable first and apply the tint afterwards.

toolbar.setNavigationIcon(R.drawable.ic_back)
toolbar.children.forEach {
    (it as? AppCompatImageButton)?.imageTintList =
            ColorStateList.valueOf(Color.GREEN)
    it.refreshDrawableState()
}

Answer 3

You can try to tint the icon

   toolbar.getNavigationIcon().setTint(getColor(R.color.white));