如何让AppCompatActivity的ActionBar选项菜单水波纹不超出圆角边界

问题原因 #

AppCompat 库的溢出菜单默认不会对弹出窗口做轮廓裁剪，菜单项的水波纹效果不受背景圆角限制，就会出现溢出边界的问题。

步骤1：修改溢出菜单主题样式，开启裁剪 #

修改themes.xml中的OverFlowMenu样式，增加轮廓裁剪配置：

<style name="OverFlowMenu" parent="Widget.AppCompat.Light.PopupMenu.Overflow">
    <item name="android:popupBackground">@drawable/menu_popup_background</item>
    <!-- 开启轮廓裁剪，限制子View绘制范围不超出父布局边界 -->
    <item name="android:clipToOutline">true</item>
    <!-- 可选：调整弹出位置避免和标题栏重叠 -->
    <item name="overlapAnchor">false</item>
    <item name="android:dropDownVerticalOffset">4dp</item>
</style>

如果你的项目minSdk >= 31，还可以直接加<item name="android:popupRoundedCorner">26dp</item>使用系统原生圆角，不需要自定义背景drawable。

步骤2：自定义菜单项水波纹（兼容低版本系统） #

如果步骤1在低版本系统（API < 30）上不生效，可以自定义水波纹drawable限制水波纹范围：

1. 在res/drawable-v21目录下新建menu_item_ripple.xml：

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
    <!-- 用和菜单背景一致的圆角做遮罩，限制水波纹范围 -->
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <corners android:radius="26dp" />
            <solid android:color="@android:color/white" />
        </shape>
    </item>
</ripple>

2. 在主题AAA中增加菜单项样式配置，关联自定义水波纹：

<style name="AAA" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="actionOverflowMenuStyle">@style/OverFlowMenu</item>
    <!-- 关联自定义菜单项样式 -->
    <item name="android:dropDownItemStyle">@style/MyMenuItem</item>
</style>

<style name="MyMenuItem" parent="Widget.AppCompat.DropDownItem">
    <item name="android:background">@drawable/menu_item_ripple</item>
    <item name="android:paddingHorizontal">16dp</item>
    <item name="android:paddingVertical">12dp</item>
</style>

注意事项 #

• 菜单背景menu_popup_background.xml的圆角半径和水波纹遮罩的圆角半径要保持一致，避免出现错位。
• 如果上下两端的菜单项水波纹还是有轻微溢出，可以调整menu_popup_background.xml里的padding值，给圆角留出更多空间。

内容的提问来源于stack exchange，提问作者yunfeng huang