如何解决 MaterialCardView 内部子视图不被圆角裁剪的问题

在Android项目中使用MaterialCardView实现带圆角的卡片布局时，很多开发者会发现如果内部放置了ImageView、TextView等子视图，子视图的内容经常会超出MaterialCardView的圆角范围，没有被圆角裁剪，导致卡片的四个角出现内容溢出的问题，影响界面的美观度。

问题产生的原因

MaterialCardView本身默认是支持圆角裁剪的，但是它的裁剪逻辑有一些限制。默认情况下，MaterialCardView的裁剪只作用于自身的背景，不会自动对内部的所有子视图进行裁剪，尤其是当子视图设置了margin、或者子视图的背景没有正确适配父容器的圆角时，就容易出现溢出的情况。另外如果子视图开启了硬件加速相关的特殊绘制，也可能导致裁剪失效。

解决方案一：设置clipToPadding和clipChildren属性

这是最简单的解决方式，只需要在MaterialCardView的布局文件中添加两个属性，强制让父容器裁剪内部的子视图和padding区域的内容。

<com.google.android.material.card.MaterialCardView
    android:layout_width="200dp"
    android:layout_height="200dp"
    app:cardCornerRadius="16dp"
    android:clipToPadding="true"
    android:clipChildren="true">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/test_img"/>

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

其中android:clipToPadding表示是否裁剪padding区域内的内容，android:clipChildren表示是否裁剪子视图超出父容器范围的内容，两个都设置为true就可以解决大部分子视图溢出的问题。

解决方案二：使用ViewOutlineProvider自定义裁剪轮廓

如果第一种方式没有生效，可以自定义ViewOutlineProvider，手动设置MaterialCardView的裁剪轮廓为圆角矩形，强制所有内容按照这个轮廓裁剪。

MaterialCardView cardView = findViewById(R.id.card_view);
// 设置卡片的圆角大小，和布局中设置的cardCornerRadius保持一致
float radius = getResources().getDimension(R.dimen.card_corner_radius);
cardView.setOutlineProvider(new ViewOutlineProvider() {
    @Override
    public void getOutline(View view, Outline outline) {
        // 创建一个圆角矩形轮廓，用于裁剪
        outline.setRoundRect(0, 0, view.getWidth(), view.getHeight(), radius);
    }
});
// 开启裁剪功能
cardView.setClipToOutline(true);

这种方式会从View的轮廓层面进行裁剪，优先级更高，几乎可以解决所有圆角裁剪失效的问题，但是需要注意setClipToOutline方法只支持裁剪矩形、圆角矩形、圆形和椭圆这几种轮廓，复杂形状不适用。

解决方案三：调整子视图的布局参数

如果子视图是ImageView，还可以调整子视图的布局参数，避免内容超出父容器的范围。比如给ImageView设置android:adjustViewBounds="true"，让图片的边界适配ImageView的大小，同时不要给子视图设置负的margin，避免子视图超出MaterialCardView的边界。

<com.google.android.material.card.MaterialCardView
    android:id="@+id/card_view"
    android:layout_width="200dp"
    android:layout_height="200dp"
    app:cardCornerRadius="16dp">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop"
        android:src="@drawable/test_img"/>

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

不同方案的适用场景

可以通过下面的表格选择合适的解决方案：

实际开发中可以先尝试第一种方案，如果无效再使用第二种方案，基本都可以解决MaterialCardView内部子视图不被圆角裁剪的问题。

MaterialCardView圆角裁剪子视图AndroidViewOutlineProvider修改时间：2026-07-19 17:27:25