Android实现带渐变阴影的View问题求助

我太懂这种需求了！Android原生的elevation确实没法完全复刻CSS里那种细腻的渐变阴影——尤其是在灰色背景上，系统自带的阴影要么生硬，要么和背景融合得怪怪的。我之前也踩过这个坑，给你分享几个亲测有效的方案：

方案1：用LayerDrawable快速实现（无需自定义View） #

这是最快捷的方式，通过多层drawable组合出阴影效果，适合大多数场景：

1. 新建一个drawable文件（比如res/drawable/shadow_white_bg.xml）：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 阴影层：半透明渐变+ padding控制扩散范围 -->
    <item>
        <shape android:shape="rectangle">
            <!-- 调整颜色透明度（#后面两位）控制阴影深浅，比如#1A是10%透明度 -->
            <solid android:color="#1A000000" />
            <!-- 和白色View的圆角保持一致，避免阴影和背景圆角错位 -->
            <corners android:radius="8dp" />
            <!-- padding值决定阴影向外扩散的大小，根据需求调整 -->
            <padding
                android:bottom="3dp"
                android:left="3dp"
                android:right="3dp"
                android:top="1dp" />
        </shape>
    </item>
    <!-- 白色背景层 -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF" />
            <corners android:radius="8dp" />
        </shape>
    </item>
</layer-list>

2. 在布局里给你的View设置这个背景：

<View
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_margin="16dp" <!-- 给阴影留空间，避免被父布局截断 -->
    android:background="@drawable/shadow_white_bg" />

方案2：自定义View画渐变阴影（高度自定义） #

如果需要更细腻的渐变效果（比如像CSS那样的多层阴影、渐变方向自定义），可以自己写一个自定义View：

class GradientShadowView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {

    private val shadowPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        // 创建从透明到深灰的线性渐变，模拟底部扩散的阴影
        val gradient = LinearGradient(
            0f, 0f, 0f, height.toFloat() + 10f.dpToPx(),
            Color.TRANSPARENT, Color.parseColor("#33000000"),
            Shader.TileMode.CLAMP
        )
        shader = gradient
    }

    private val whiteBgPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        color = Color.WHITE
    }

    private val rect = RectF()
    private val cornerRadius = 8f.dpToPx()

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        // 先画阴影：位置比白色背景向下偏移一点，扩大底部范围
        rect.set(
            0f, 2f.dpToPx(),
            width.toFloat(), height.toFloat() + 8f.dpToPx()
        )
        canvas.drawRoundRect(rect, cornerRadius, cornerRadius, shadowPaint)
        
        // 再画白色背景层
        rect.set(0f, 0f, width.toFloat(), height.toFloat())
        canvas.drawRoundRect(rect, cornerRadius, cornerRadius, whiteBgPaint)
    }

    // 扩展方法：dp转px
    private fun Float.dpToPx(): Float {
        return TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_DIP, this, context.resources.displayMetrics
        )
    }
}

然后在布局里直接使用这个自定义View即可，你可以根据需求修改渐变的方向、颜色、偏移量。

方案3：用MaterialCardView（适合Material Design项目） #

如果你的项目已经引入了Material Components库，用MaterialCardView是最省心的选择——它的阴影实现比原生elevation更细腻，还能自定义阴影颜色：

<com.google.android.material.card.MaterialCardView
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_margin="16dp"
    app:cardBackgroundColor="#FFFFFF" <!-- 白色背景 -->
    app:cardElevation="6dp" <!-- 阴影高度 -->
    app:shadowColor="#26000000" <!-- 自定义阴影颜色和透明度 -->
    app:cardCornerRadius="8dp">

    <!-- 这里放你的View内容 -->

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

小提示 #

不管用哪种方案，记得给View加足够的margin，不然阴影会被父布局的边界截断，显示不完整哦！

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