Android中CardView设置圆角后被内部View覆盖的问题如何修复

问题原因 #

CardView默认不会裁剪子View内容到自身圆角边界，Android 12（API 31）以下默认关闭子内容裁剪，同时默认开启的圆角内容重叠避让机制会让子View覆盖圆角区域，最终出现ImageView顶掉CardView圆角的问题。

修复方法 #

方案1：XML配置修复（适配绝大多数系统版本） #

直接在CardView标签中新增两个属性即可：

app:cardPreventCornerOverlap="false"
android:clipChildren="true"

修改后的CardView示例代码：

<androidx.cardview.widget.CardView
    app:cardCornerRadius="20dp"
    app:cardPreventCornerOverlap="false"
    android:clipChildren="true"
    android:layout_width="100dp"
    android:layout_height="200dp"
    app:layout_constraintBottom_toTopOf="@+id/textView"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" >

    <ImageView
        android:layout_marginTop="0dp"
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/ic_launcher_background" />
</androidx.cardview.widget.CardView>

额外提醒：你原代码中CardView的宽高用了sp单位，sp是专门用于设置字体大小的单位，建议替换为dp，避免跟随系统字体大小变化出现布局异常

方案2：代码动态开启裁剪（低版本系统适配用） #

如果方案1在Android 7.0及以下版本失效，可以在页面初始化逻辑中给CardView开启轮廓裁剪：
Kotlin代码：

val cardView = findViewById<CardView>(R.id.cardView) // 替换为你的CardView id
cardView.clipToOutline = true

Java代码：

CardView cardView = findViewById(R.id.cardView); // 替换为你的CardView id
cardView.setClipToOutline(true);

方案3：直接裁剪ImageView（备选） #

如果不需要修改CardView属性，也可以直接在ImageView标签中添加属性实现圆角裁剪：

android:clipToOutline="true"

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