Search code examples
androidandroid-toolbarandroid-xmlandroid-themematerial-components-android

android - Change MaterialToolbar menu items icon color


Im currently creating an app, which has a MaterialToolbar widget. I want to set the icons color to white. I tried following the accepted answer in this question, however, it doesnt work. Adding colorControlNormal in styles.xml doesnt work.

This is my MaterialToolbar xml code:

<com.google.android.material.appbar.MaterialToolbar
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/topToolbar"
            android:background="@color/colorPrimaryDark"
            app:title="Revo"
            app:titleTextColor="@android:color/white"
            app:menu="@menu/menu_floatingsearchview"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

What can i do?

EDIT, SOLUTION AND EXPLENATION

Thanks everyone for the nice answers. I managed to find a solution, that will include both solutions, and another question.

In this question, was asked why colorControlNormal doesnt work. The accepted answer says that in the vector lines, you have to change the value given to android:fillColor, and replace it with ?attr/colorControlNormal. Doing this trick, item colorControlNormal, will control the desired icons color.

In the app main style, you need to put:

<item name="colorControlNormal">@android:color/white</item>

Then, in the desired icon, you need to put under path:

android:fillColor="?attr/colorControlNormal"

Thats it! Now the icons will get the color given to the colorControlNormal attribute!


Solution

  • You can use:

        <com.google.android.material.appbar.MaterialToolbar
            app:menu="@menu/toolbar_menu"
            style="@style/Widget.MaterialComponents.Toolbar.Primary
            android:theme="@style/MyThemeOverlay_Toolbar"
            .../>
    

    with:

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

    enter image description here