Change menu items color

Question

I'm trying to change the color on menu items but with no luck.

I'd like to change the color of the menu items according to the material color system which i have defined in my color files.

Here is my xml files. Any ideas?

app_bar_navigationdrawer.xml

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" /> 

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

    <include layout="@layout/content_navigation_drawer" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@drawable/ic_baseline_add_circle_outline_24" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#ff0125</color>  <!-- 6200EE -->
    <color name="colorPrimaryVariant">#ff5a50</color>  <!-- 3700B3 -->
    <color name="colorSecondary">#ff9100</color>9e9e9e <!-- 03DAC6 -->
    <color name="colorSecondaryVariant">#c56200</color> <!-- 018786 -->
    <color name="colorBackground">#eeeeee</color>  <!-- FFFFFF -->
    <color name="colorSurface">#eeeeee</color> <!-- FFFFFF -->
    <color name="colorError">#B00020</color>
    <color name="colorOnPrimary">#FFFFFF</color>
    <color name="colorOnSecondary">#000000</color>
    <color name="colorOnBackground">#000000</color>
    <color name="colorOnSurface">#000000</color>
    <color name="colorOnError">#FFFFFF</color>
    <color name="actionBarColor">#c30000</color>
</resources>

colors-night.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#dc462b</color> <!-- BB86FC -->
    <color name="colorPrimaryVariant">#ff6434</color> <!-- 3700B3 -->
    <color name="colorSecondary">#8858c8</color> <!-- 03DAC6 -->
    <color name="colorSecondaryVariant">#bb86fc</color> <!-- 03DAC6 -->
    <color name="colorBackground">#121212</color>
    <color name="colorSurface">#121212</color>
    <color name="colorError">#CF6679</color>
    <color name="colorOnPrimary">#000000</color>
    <color name="colorOnSecondary">#000000</color>
    <color name="colorOnBackground">#FFFFFF</color>
    <color name="colorOnSurface">#FFFFFF</color>
    <color name="colorOnError">#000000</color>
    <color name="actionBarColor">#121212</color>
</resources>

As you can see in attachments the color of the menu item does not change in light either on dark theme.

Answer 1

You can override the color used in Toolbar menu.

  <com.google.android.material.appbar.MaterialToolbar
        style="@style/Widget.MaterialComponents.Toolbar.Primary"
        app:popupTheme="@style/AppTheme.PopupOverlay"
        />

with:

<style name="AppTheme.ToolabePopupOverlay" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
    <item name="colorSurface">@color/...</item>  <!-- background -->
    <item name="android:textColor">@color/...</item>   <!-- text color -->
</style>

It works also for androidx.appcompat.widget.Toolbar.