如何在Android XML布局中实现CardView左侧白绿渐变描边效果？

根据你提供的效果需求，推荐以下几种可行实现方案：

方案一：LayerDrawable 组合背景（静态场景首选） #

通过分层 Drawable 叠加主背景和左侧渐变竖条，无需额外布局嵌套：

1. 创建组合背景文件 res/drawable/card_left_gradient_bg.xml：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Card 主背景 -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <!-- 左侧渐变竖条 -->
    <item>
        <shape android:shape="rectangle">
            <gradient
                android:angle="90"
                android:startColor="#FFFFFF"
                android:endColor="#4CAF50"
                android:type="linear" />
            <size android:width="4dp" />
            <corners
                android:topLeftRadius="8dp"
                android:bottomLeftRadius="8dp" />
        </shape>
    </item>
</layer-list>

2. 在布局中给 CardView 设置该背景：

<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/card_left_gradient_bg"
    app:cardBackgroundColor="@android:color/transparent"
    app:cardCornerRadius="8dp"
    app:cardElevation="4dp">

    <!-- 内部内容布局 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:text="示例内容" />
</androidx.cardview.widget.CardView>

方案二：ConstraintLayout 嵌套渐变 View（快速开发首选） #

直接在 CardView 内部添加一个渐变背景的 View，实现成本最低，圆角匹配度高：

<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="8dp"
    app:cardElevation="4dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <!-- 左侧渐变竖条 -->
        <View
            android:id="@+id/gradient_side"
            android:layout_width="4dp"
            android:layout_height="0dp"
            android:background="@drawable/vertical_gradient"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent" />

        <!-- 内容区域 -->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="16dp"
            android:text="示例内容"
            app:layout_constraintLeft_toRightOf="@id/gradient_side" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

对应的渐变背景文件 res/drawable/vertical_gradient.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="90"
        android:startColor="#FFFFFF"
        android:endColor="#4CAF50" />
    <corners
        android:topLeftRadius="8dp"
        android:bottomLeftRadius="8dp" />
</shape>

方案三：自定义 Drawable（复杂需求首选） #

如果需要精确控制渐变描边的显示逻辑，可自定义 Drawable：

class LeftGradientStrokeDrawable : Drawable() {
    private val paint = Paint(Paint.ANTI_ALIAS_FLAG)
    private var cornerRadius = 8f.dpToPx()
    private var strokeWidth = 4f.dpToPx()

    init {
        paint.style = Paint.Style.STROKE
        paint.strokeWidth = strokeWidth
        paint.shader = LinearGradient(
            0f, 0f, 0f, 0f,
            Color.WHITE, Color.GREEN,
            Shader.TileMode.CLAMP
        )
    }

    override fun draw(canvas: Canvas) {
        val rect = bounds
        val path = Path().apply {
            addRoundRect(
                rect.left.toFloat(), rect.top.toFloat(),
                rect.right.toFloat(), rect.bottom.toFloat(),
                cornerRadius, cornerRadius, Path.Direction.CW
            )
        }
        // 裁剪仅显示左侧描边区域
        val clipPath = Path().apply {
            addRect(
                rect.left.toFloat(), rect.top.toFloat(),
                rect.left + strokeWidth, rect.bottom.toFloat(),
                Path.Direction.CW
            )
        }
        canvas.save()
        canvas.clipPath(clipPath)
        canvas.drawPath(path, paint)
        canvas.restore()
    }

    override fun setAlpha(alpha: Int) {
        paint.alpha = alpha
        invalidateSelf()
    }

    override fun setColorFilter(colorFilter: ColorFilter?) {
        paint.colorFilter = colorFilter
        invalidateSelf()
    }

    override fun getOpacity(): Int = PixelFormat.TRANSLUCENT

    fun updateParams(radius: Float, width: Float) {
        cornerRadius = radius.dpToPx()
        strokeWidth = width.dpToPx()
        paint.strokeWidth = strokeWidth
        invalidateSelf()
    }

    private fun Float.dpToPx(): Float = this * Resources.getSystem().displayMetrics.density
}

代码中设置给 CardView：

val cardView = findViewById<CardView>(R.id.target_card)
val strokeDrawable = LeftGradientStrokeDrawable().apply {
    updateParams(8f, 4f)
}
cardView.foreground = strokeDrawable

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