MaterialCardView内ImageView无法贴合边缘问题求助

问题现象 #

给MaterialCardView设置左下角圆角后，内部的ImageView无法贴合CardView外边缘，四周存在明显间距，且图片左下角没有跟随CardView的圆角裁剪。

问题根源 #

1. 默认内边距：MaterialCardView的默认样式带有contentPadding，导致子View和Card边缘产生空隙
2. 裁剪未开启：ImageView不会自动继承父布局的圆角形状，需要手动开启裁剪逻辑

具体解决步骤 #

1. 清除CardView的默认内边距 #

在自定义CardView样式中添加contentPadding属性，将其设为0dp：

<!-- styles.xml -->
<style name="CustomCardViewStyle" parent="@style/Widget.MaterialComponents.CardView">
    <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay_card_custom_corners</item>
    <!-- 移除默认内边距 -->
    <item name="contentPadding">0dp</item>
</style>

2. 开启裁剪让图片跟随圆角 #

推荐直接给CardView设置裁剪属性，这样内部所有子View都会继承裁剪效果：

<!-- activity_main.xml -->
<com.google.android.material.card.MaterialCardView
    android:id="@+id/card_with_on_view"
    style="@style/CustomCardViewStyle"
    android:layout_width="match_parent"
    android:layout_height="500dp"
    android:clipToChildren="true"
    android:clipToPadding="true">

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

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

如果只需要给单个ImageView裁剪，也可以给ImageView设置相同的圆角背景并开启裁剪：

<!-- 先创建drawable文件：res/drawable/card_corner.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:bottomLeftRadius="55dp" />
</shape>

然后修改ImageView：

<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"
    android:src="@drawable/house"
    android:background="@drawable/card_corner"
    android:clipToOutline="true" />

验证效果 #

完成上述修改后，ImageView会完全贴合CardView的边缘，左下角的圆角也会正确裁剪图片。

内容的提问来源于stack exchange，提问作者Captai-N