将样式更改为 MaterialComponents 后，溢出菜单背景颜色消失了

Question

起初，我的应用程序使用<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> 样式。但我将其更改为 Material Components <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">（为了使用标签的 Material 徽章计数）。所以改变后的样式是这样的：

<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>

更改样式后，溢出菜单背景现在为白色。 （之前是带有白色文字的绿色背景Theme.AppCompat.Light.DarkActionBar）。但是现在背景是白色的，文字也是白色的。

这里是工具栏的xml：

<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>

工具栏的主题风格：

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

我尝试在AppTheme 中设置<item name="popupMenuStyle">@style/CustomPopup</item>

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

但还是没有运气。

我用来测试的设备是Android 8.0，compileSdkVersion和targetSdkVersion是28。

感谢您的宝贵时间。

Answer 1

溢出菜单中弹出的背景颜色在应用主题中由属性actionOverflowMenuStyle定义。

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

1.2.0-alpha02fixed 混合了这个值的明暗主题。

您还可以使用以下方法自定义弹出窗口：

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

与：

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

您还可以使用Toolbar 中的android:theme 属性覆盖颜色而不更改可绘制对象

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

使用：

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

Answer 2

使用 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>

关键是，正如您所说，actionOverflowMenuStyle 属性是成功的关键。将此设置为使用 Widget.MaterialComponents.PopupMenu.Overflow 样式的样式。然后更改要为溢出菜单自定义的属性。

RG

Answer 3

您应该将此代码添加到工具栏中，它会起作用

<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/ThemeOverlay.AppCompat.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light**">
</androidx.appcompat.widget.Toolbar>