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>

Answer 2

Another twist to the accepted answer above using MaterialComponents.

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme.    -->
    <style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
        <item name="actionOverflowMenuStyle">@style/Theme.MyApp.PopupOverlay3</item>
    </style>

    <style name="Theme.MyApp.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="Theme.MyApp.PopupOverlay3" parent="@style/Widget.MaterialComponents.PopupMenu.Overflow">
        <item name="android:popupBackground">@color/black</item>
        <item name="android:actionMenuTextColor">@color/white</item>
    </style>

    <style name="Theme.MyApp.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

    <style name="Theme.MyApp.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>

the key is, as you say the actionOverflowMenuStyle attribute is the key to success. Set this to a style which uses the Widget.MaterialComponents.PopupMenu.Overflow style. And then change the attributes you want to customize for the overflow menu.

RG