How to change color Toolbar icons?

Question

I am currently trying to change the colors of the icons in the toolbar via the theme (I know the way to do it via kotlin but I am interested to be able to do it on the whole app via a theme). Even though I read the google doc on this subject and several topics, I was not able to change the color of these icons. I'm using MaterialTheme

Manifest where I defined my theme and my activity :

<application
        android:name=".App"
        android:theme="@style/Theme.MyApp">
        <activity
            android:name=".views.activity"
            android:label="@string/title_activity" />

    </application>

Themes.xml

 <!--Top level DayNight theme to be used in AndroidManifest.xml-->
    <style name="Theme.MyApp" parent="Base.Theme.MyApp" />
    <!--Base custom theme which will be shared between both light and dark theme variants-->
    <style name="Base.Theme.MyApp" parent="Base.Theme.MaterialThemeBuilder">

        <!--Material color attributes (light theme) -->
        <!--colorPrimary colors map to components and elements, such as app bars and buttons. -->
        <!--colorSecondary colors are most often used as accents on components, such as FABs and -->
        <!--selection controls.-->
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryVariant">@color/primaryLightColor</item>
        <item name="colorSecondary">@color/secondaryColor</item>
        <item name="colorSecondaryVariant">@color/secondaryLightColor</item>

        <!--colorBackground appears behind scrollable content and is used for the default window-->
        <!--background. colorSurface is mapped to the surface of components such as cards, sheets-->
        <!--and menus. colorError is used to indicate an error state for components such as-->
        <!--text fields.-->
        <item name="android:colorBackground">@color/grey_200</item>
        <item name="colorSurface">@color/black_800</item>
        <item name="colorError">@color/red_600</item>
        <!--"On" colors define how text, icons and strokes are colored in relation to the surface-->
        <!--on which they appear.-->
        <item name="colorOnPrimary">@color/black_800</item>
        <item name="colorOnSecondary">@color/black_800</item>
        <item name="colorOnBackground">@color/black_800</item>
        <item name="colorOnSurface">@color/black_800</item>
        <item name="colorOnError">@color/white</item>
        <!--Material type attributes-->
        ...
        <!--Material shape attributes-->
        ...
        <item name="toolbarStyle">@style/Widget.MyTheme.Toolbar</item>
    </style>

Styles.xml

    <!--Toolbar-->
    <style name="Widget.MyTheme.Toolbar" parent="Widget.MaterialComponents.Toolbar.Surface"> // I have also try ThemeOVerlay here and Toolbar.Primary
        <item name="android:background">@color/grey_200</item>
        <item name="titleTextAppearance">@style/TextAppearance.MyTheme.Headline6</item>
        <item name="subtitleTextAppearance">@style/TextAppearance.MyTheme.Subtitle1</item>
        <item name="titleTextColor">@color/black_800</item>
        <!-- color used by navigation icon and overflow icon -->
        <item name="colorOnPrimary">@color/red_800</item>
        <item name="colorControlNormal">@color/red_800</item>
    </style>

As you can see the toolbar is provided by the theme so the activity xml is not revelant here. My icons are in vector format, generated via AndroidStudio. I have try this solution but not working :/

score 3 · Answer 1 · answered Apr 25 '21 at 18:23

The solution linked in the question works but you are using a style (with style="..") not a theme overlay (with android:theme="..").

<style name="Base.Theme.MyApp" parent="Base.Theme.MaterialThemeBuilder">
    <item name="toolbarStyle">@style/Widget.MyTheme.Toolbar</item>
</style>

With the theme attribute toolbarStyle you are using a style:

<style name="Widget.MyTheme.Toolbar" parent="Widget.MaterialComponents.Toolbar">
    <!-- Title text color -->
    <item name="titleTextColor">@color/colorSecondary</item>
    <!-- ..... -->

    <!-- ThemeOverlay -->
    <item name="materialThemeOverlay">@style/MyThemeOverlay_Toolbar</item>
</style>

<style name="MyThemeOverlay_Toolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
    <!-- color used by navigation icon and overflow icon -->
    <item name="colorOnPrimary">@color/red600Dark</item>
</style>

and in your layout use a MaterialToolbar:

    <com.google.android.material.appbar.MaterialToolbar
     .../>

Thank you, the 3 dot button is red but not the other action button that stay in their default color. How is yours defined? On my side it's a vector button with a white fillColor and it remains white — filol, May 01 '21 at 15:57
@GabrieleMariotti so there is no way to style the plus action button from the style / theme? — Leandro Ocampo, May 10 '23 at 13:54

How to change color Toolbar icons?

1 Answers1