Overflow menu background color is gone after changing styles to MaterialComponents

Question

At first, My app use <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> style. But I changed it to Material Components <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar"> (in order to use the tab's badge count of Material). So the style after changing is like this:

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/green</item>
    <item name="colorPrimaryDark">@color/green</item>
    <item name="colorAccent">@color/green</item>
</style>

After changing the style, the overflow menu background is now white. (It was green background with white text before with Theme.AppCompat.Light.DarkActionBar). But now the background is white, and the text is also white.

Here is the xml for the toolbar:

<androidx.appcompat.widget.Toolbar
    android:id="@+id/ev_toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/green"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/ToolbarTheme">
</androidx.appcompat.widget.Toolbar>

and theme style of the toolbar:

<style name="ToolbarTheme" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:textColorPrimary">@color/white</item>
    <item name="android:colorBackground">@color/green</item>
</style>

I tried setting <item name="popupMenuStyle">@style/CustomPopup</item> in the AppTheme with

<style name="CustomPopup" parent="@style/Widget.MaterialComponents.PopupMenu">
    <item name="android:popupBackground">@color/green</item>
</style>

but still no luck.

The device I use to test uses Android 8.0, compileSdkVersion and targetSdkVersion is 28.

Thank you for your time.

Answer 1

The background color of the popup in overflow menu is defined in the app theme by the attribute actionOverflowMenuStyle.

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
   <item name="actionOverflowMenuStyle">@style/Widget.MaterialComponents.PopupMenu.Overflow</item>
</style>

The 1.2.0-alpha02 fixed a mixing between light and dark theme for this value.

You can also customize the popup using:

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

with:

  <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
    <item name="android:popupBackground">@drawable/...</item>
  </style>

You can also override the color without changing the drawable using the android:theme attribute in the Toolbar

    <com.google.android.material.appbar.MaterialToolbar
        android:theme="@style/MyThemeOverlay_Toolbar"
        ../>

Using:

  <style name="MyThemeOverlay_Toolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
    <item name="colorSurface">@color/custom</item>
  </style>