Android中如何实现边框粗细一致的渐变边框CardView？

核心原因 #

CardView的圆角是通过系统裁剪实现的，而渐变边框的圆角是绘制出来的，若两者的圆角半径计算不匹配，会导致角落的边框视觉上更粗——本质是边框的圆角部分被CardView裁剪后，剩余的视觉宽度大于直边。

解决方案 #

1. 编写正确的渐变边框LayerDrawable

创建bg_gradient_border.xml，通过两层Shape组合实现渐变边框，重点调整上层圆角半径：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 底层：填充背景，圆角与CardView完全一致 -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/card_background" /> <!-- 与CardView背景色保持一致 -->
            <corners android:radius="@dimen/card_corner_radius" />
        </shape>
    </item>
    <!-- 上层：渐变边框，通过inset控制边框宽度，圆角为「底层圆角 - 边框宽度」 -->
    <item
        android:left="@dimen/border_width"
        android:right="@dimen/border_width"
        android:top="@dimen/border_width"
        android:bottom="@dimen/border_width">
        <shape android:shape="rectangle">
            <gradient
                android:startColor="@color/gradient_start"
                android:endColor="@color/gradient_end"
                android:angle="0" /> <!-- 可按需调整渐变角度 -->
            <corners android:radius="@dimen/card_corner_radius_minus_border" />
        </shape>
    </item>
</layer-list>

在res/values/dimens.xml中定义统一尺寸：

<dimen name="card_corner_radius">16dp</dimen>
<dimen name="border_width">1dp</dimen>
<dimen name="card_corner_radius_minus_border">15dp</dimen> <!-- 16dp - 1dp，必须精确计算 -->

2. 配置CardView布局

将CardView的背景设为上述drawable，同时确保CardView的圆角与drawable底层圆角一致，设置elevation和透明背景：

<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:cardCornerRadius="@dimen/card_corner_radius"
    app:cardElevation="4dp"
    app:cardBackgroundColor="@android:color/transparent"
    android:padding="@dimen/border_width"> <!-- 避免内部内容被边框覆盖 -->

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="渐变边框卡片按钮"
        android:padding="16dp"
        android:gravity="center" />

</androidx.cardview.widget.CardView>

3. 关键注意事项

• 必须保证上层圆角半径 = 底层圆角半径 - 边框宽度，这是解决角落粗细不一致的核心。
• 所有尺寸使用dp单位，确保多设备适配。
• 若使用MaterialCardView，仅需替换CardView为com.google.android.material.card.MaterialCardView，配置逻辑完全一致。

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