将样式更改为 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>

但还是没有运气。

我用来测试的设备使用Android8.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-alpha02 fixed 此值的明暗主题混合。

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

    <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

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

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

Answer 3

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

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

Overflow menu background color is gone after changing styles to MaterialComponents

android

xml

android-theme

material-components

material-components-android