MaterialCardView内部元素未裁剪，自定义圆角真机失效求助

我想制作一个带有不同圆角的MaterialCardView，在Android Studio的布局预览中显示正常，但在Android设备上运行时，圆角效果消失了。

相关布局XML代码 #

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:backgroundTint="@color/white"
    android:clipChildren="true"
    tools:context=".ui.main.MainFragment">

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:clipChildren="true"
        app:cardElevation="15dp"
        app:cardPreventCornerOverlap="false"
        app:cardUseCompatPadding="true"
        app:shapeAppearanceOverlay="@style/CustomShapeAppearance">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:orientation="vertical"
            android:visibility="visible">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/gradient_second"
                android:orientation="vertical">

                <com.google.android.material.textfield.TextInputLayout
                    android:id="@+id/filledTextField"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@android:color/transparent"
                    android:hint="@string/InsertLogin">

                    <com.google.android.material.textfield.TextInputEditText
                        android:id="@+id/username_edit_text"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="@android:color/transparent" />
                </com.google.android.material.textfield.TextInputLayout>

                <com.google.android.material.textfield.TextInputLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/InsertPassWord"
                    app:boxBackgroundColor="#00FFFFFF">

                    <com.google.android.material.textfield.TextInputEditText
                        android:id="@+id/password_edit_text"
                        style="@style/AppTheme"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="@android:color/transparent"
                        android:singleLine="true" />

                </com.google.android.material.textfield.TextInputLayout>
            
            </LinearLayout>

            <com.google.android.material.button.MaterialButton
                android:id="@+id/login_button"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/gradient_main"
                android:text="@string/Login"
                app:backgroundTint="@null" />


        </LinearLayout>
    </com.google.android.material.card.MaterialCardView>

</FrameLayout>

自定义MyMaterialCardView类代码（尝试后无效） #

public class MyMaterialCardView extends MaterialCardView {
    private float radiusTopLeft = 20;
    private float radiusTopRight = 20;
    private float radiusBottomRight = 20;
    private float radiusBottomLeft = 20;

    public MyMaterialCardView(Context context) {
        super(context);
        init(null);
    }

    public MyMaterialCardView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(attrs);
    }

    public MyMaterialCardView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(attrs);
    }

    private void init(AttributeSet attrs) {
        if (attrs != null) {
            TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.MyMaterialCardView);
            radiusTopLeft = a.getDimension(R.styleable.MyMaterialCardView_radiusTopLeft, 20);
            radiusTopRight = a.getDimension(R.styleable.MyMaterialCardView_radiusTopRight, 20);
            radiusBottomRight = a.getDimension(R.styleable.MyMaterialCardView_radiusBottomRight, 20);
            radiusBottomLeft = a.getDimension(R.styleable.MyMaterialCardView_radiusBottomLeft, 20);
            a.recycle();
        }
        ShapeAppearanceModel shapeAppearanceModel = new ShapeAppearanceModel()
                .toBuilder()
                .setTopLeftCorner(CornerFamily.ROUNDED, radiusTopLeft)
                .setTopRightCorner(CornerFamily.ROUNDED, radiusTopRight)
                .setBottomRightCorner(CornerFamily.ROUNDED, radiusBottomRight)
                .setBottomLeftCorner(CornerFamily.ROUNDED, radiusBottomLeft)
                .build();


        setShapeAppearanceModel(shapeAppearanceModel);
    }
}

核心问题 #

MaterialCardView自身的圆角已经生效，但内部子布局（比如带渐变背景的LinearLayout）没有跟随父View的圆角进行裁剪，导致视觉上圆角效果被覆盖。

解决步骤 #

1. 开启MaterialCardView的裁剪功能
   在布局中的MaterialCardView标签内添加android:clipToOutline="true"属性，这个属性会让父View按照自身的轮廓（包括圆角）裁剪所有子元素。

   修改后的MaterialCardView代码片段：

   <com.google.android.material.card.MaterialCardView
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_gravity="center"
       android:clipChildren="true"
       android:clipToOutline="true" <!-- 新增该属性 -->
       app:cardElevation="15dp"
       app:cardPreventCornerOverlap="false"
       app:cardUseCompatPadding="true"
       app:shapeAppearanceOverlay="@style/CustomShapeAppearance">
   

2. 确认shapeAppearanceOverlay样式配置正确
   检查你的CustomShapeAppearance样式是否正确设置了不同角落的圆角，示例配置如下：

   <style name="CustomShapeAppearance" parent="ShapeAppearance.MaterialComponents.CardView">
       <item name="cornerFamilyTopLeft">rounded</item>
       <item name="cornerSizeTopLeft">20dp</item>
       <item name="cornerFamilyTopRight">rounded</item>
       <item name="cornerSizeTopRight">20dp</item>
       <item name="cornerFamilyBottomRight">rounded</item>
       <item name="cornerSizeBottomRight">0dp</item> <!-- 示例：右下角无圆角 -->
       <item name="cornerFamilyBottomLeft">rounded</item>
       <item name="cornerSizeBottomLeft">20dp</item>
   </style>
   

3. 移除自定义CardView类（可选）
   如果通过上述两步已经解决问题，无需再使用自定义的MyMaterialCardView类——MaterialCardView本身支持通过shapeAppearanceOverlay配置不同角落的圆角。

原理说明 #

clipToOutline="true"会启用View的轮廓裁剪机制，当父View有圆角（通过shapeAppearance设置）时，所有子元素都会被裁剪成与父View一致的圆角形状，内部的渐变背景就不会超出圆角范围了。布局预览可能默认处理了裁剪逻辑，但真机需要显式开启该属性。

内容的提问来源于stack exchange，提问作者Mr.Krotos