Tint Navigation Icon in Toolbar
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.