为CardView设置半透明cardBackgroundColor时中间出现异常矩形如何解决？

异常原因 #

该问题是 CardView 向下兼容特性导致的：为了在 Android 5.0（API 21）以下系统也能正常展示圆角和阴影效果，CardView 默认会绘制一层不透明的底色用于承载阴影，同时开启了圆角区域与内容的防重叠逻辑。当你为 cardBackgroundColor 设置半透明颜色时，上层的半透明色无法完全遮盖底层的不透明底色，就会透出中间的矩形区域。如果使用不带透明度的纯色，上层颜色会完全覆盖底层底色，自然看不到异常。

可行解决方案 #

• 方案1：关闭防圆角重叠特性
  绝大多数场景下直接在 CardView 布局中添加 app:cardPreventCornerOverlap="false" 属性即可解决问题，修改后的布局示例如下：

  <androidx.cardview.widget.CardView
        android:layout_width="160dp"
        android:layout_height="160dp"
        app:cardBackgroundColor="#AACC0000"
        app:cardCornerRadius="30dp"
        app:cardPreventCornerOverlap="false">
  
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Some text" />
  
  </androidx.cardview.widget.CardView>
  

• 方案2：适配高版本系统
  如果你的应用最小支持版本 ≥ API 21，可以额外添加 app:cardUseCompatPadding="false" 属性，同时在代码中为 CardView 开启轮廓裁剪，效果更稳定：

  // Kotlin 代码示例
  cardView.clipToOutline = true
  

  // Java 代码示例
  cardView.setClipToOutline(true);
  

• 方案3：替换背景设置方式
  如果上述方案不满足你的需求，可以不使用 cardBackgroundColor 设置半透明颜色，转而给 CardView 内部的第一个子布局设置半透明圆角背景，也能规避该兼容问题。

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