Change toolbar navigationIcon tint or color via theme or style

Question

I can set up navigation icon with tint in toolbar from code:

  Toolbar toolbar = findViewById(R.id.biometry_agreement_toolbar);
  Drawable drawable = AppCompatResources.getDrawable(requireContext(), R.drawable.ic_24_close);
  drawable.setColorFilter(ColorGenerator.buildColorFilterByAttr(toolbar.getContext(), R.attr.colorMaskColored));
  toolbar.setNavigationIcon(drawable);

or I can set icon like this in xml, but in this case i can't set tint since there is no attribute navigationIconTint:

<androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:navigationIcon="@drawable/ic_24_close"
            app:titleTextColor="@color/color_primary"
            tools:title="@string/title"/>

Is it possible to somehow set a tint for navigation icon, without java code? or setting custom icon into toolbar clears all tints and colours?

I don't like setting icons from java because there is no nice code reuse for toolbar initialisation.

I've tried different custom styles, overriding colorControlNormal, but no luck.

Thanks in advance

Manoj Perumarath · Answer 1 · 2019-09-26T07:35:39.623

7

For AndroidX you should use <com.google.android.material.appbar.MaterialToolbar instead of <androidx.appcompat.widget.Toolbar

Then try this,

<com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/mt_main_toolbar"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:elevation="1dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

Use it likethis

mt_main_toolbar.navigationIcon.setTint(Color.RED)

Using XML

<style name="TintedNavigation" parent="Widget.AppCompat.Toolbar.Button.Navigation">
<item name="tint">@color/nav_button_tint</item>

and use it in your style

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="toolbarNavigationButtonStyle">@style/TintedNavigation</item>
</style>

For AndroidX

<style name="CustomToolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
<item name="colorOnPrimary">@color/yourColour</item>
</style>

edited Sep 26 '19 at 07:35

answered Sep 26 '19 at 05:46

Manoj Perumarath

9,337
8
56
77

I know how to set tint with java/kotlin. But I want to somehow use themes and styles as a solution. If it is possible in such case. – Maksim Turaev Sep 26 '19 at 06:33
@MaksimTuraev see the updated answer – Manoj Perumarath Sep 26 '19 at 07:02
It is wrong. Since you are using the Material Components library, you **shouldn't** use an AppCompat theme. Check the doc. – Gabriele Mariotti Sep 26 '19 at 07:08
@GabrieleMariotti I posted that because he was using old components, i'll add the new too – Manoj Perumarath Sep 26 '19 at 07:22
Why should you use the MaterialToolbar instead of AndroidX Toolbar? – user1795832 Nov 27 '19 at 17:25
@user1795832 It's recommended to use Material Toolbar because it has got some more properties than the other toolbar – Manoj Perumarath Nov 28 '19 at 06:25
1

THIS is just what i needed, excelent answer. – Andy.Diaz Mar 14 '20 at 16:42

score -2 · Answer 2 · answered Sep 26 '19 at 05:46

-2

Please Refer Below Answer How to change Toolbar home icon color

Try Below Code But It May Affect The Whole Theme Color Like Radio Button Etc.,

@color/colorControlNormal

answered Sep 26 '19 at 05:46

Vaithiya Nathan

46
1
8

no luck, I've created style and referenced it from toolbar like this style="@style/ThemeOverlay.Sbrf.Light.CustomToolbar" Icon unfortunately still black – Maksim Turaev Sep 26 '19 at 06:31
Try This Or – Vaithiya Nathan Sep 26 '19 at 06:48
@VaithiyaNathan Holo theme in 2019? – Gabriele Mariotti Sep 26 '19 at 06:54
@gabriele-mariotti That's Just For Reference Use The Below Code ANd Change Color In "colorControlNormal" – Vaithiya Nathan Sep 26 '19 at 06:58
@VaithiyaNathan changing the attribute at app theme level means to change globally this value for all components. You can just override the theme only for the toolbar. Also the Material Components uses the colorOnPrimary for the toolbar icon. Check the answer linked in the original question. – Gabriele Mariotti Sep 26 '19 at 07:04

Change toolbar navigationIcon tint or color via theme or style

2 Answers2