如何在Android中实现Figma同款Drop Shadow阴影效果？

Android原生的elevation是基于Material Design的阴影体系，和Figma中可自定义偏移、模糊、扩散、颜色的参数化阴影逻辑不匹配，所以会出现效果生硬的问题。以下是几种精准复现Figma阴影的方案：

方案1：自定义Drawable实现精确阴影 #

先从Figma中提取阴影的**X偏移、Y偏移、模糊半径、扩散半径、阴影颜色（含透明度）**这几个核心参数，然后通过layer-list实现分层阴影：

1. 在res/drawable下创建自定义阴影背景文件card_custom_shadow.xml：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 阴影层 -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#26000000" /> <!-- 对应Figma阴影颜色，需转成带透明度的十六进制值 -->
            <corners android:radius="12dp" /> <!-- 和CardView圆角保持一致 -->
            <!-- 根据Figma参数调整padding：模拟扩散+偏移效果 -->
            <padding
                android:left="3dp"   <!-- X偏移(2dp) + 扩散值(1dp) -->
                android:top="1dp"    <!-- 扩散值(1dp) -->
                android:right="1dp"  <!-- 扩散值(1dp) -->
                android:bottom="5dp" /> <!-- Y偏移(4dp) + 扩散值(1dp) -->
        </shape>
    </item>
    <!-- 内容层（CardView主体背景） -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF" /> <!-- CardView背景色 -->
            <corners android:radius="12dp" />
        </shape>
    </item>
</layer-list>

调整规则参考：

• 阴影颜色：Figma中阴影透明度20%对应十六进制#33，15%对应#26，按需转换
• padding值：根据Figma的偏移和扩散数值计算，确保阴影的位置和范围和设计一致

2. 修改CardView属性，关闭原生阴影并使用自定义背景：

<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="match_parent"
    android:layout_height="wrap_content"
    app:cardElevation="0dp" <!-- 关闭原生阴影 -->
    app:cardCornerRadius="12dp" <!-- 和自定义背景圆角一致 -->
    android:background="@drawable/card_custom_shadow">

    <!-- 你的内容布局 -->

</androidx.cardview.widget.CardView>

方案2：用第三方库简化参数配置 #

如果不想手动计算参数，可以用现成的阴影库直接映射Figma参数，比如ShadowLayout：

1. 在项目build.gradle中添加依赖：

implementation 'com.github.armcha:ShadowLayout:1.2.5'

2. 用ShadowLayout包裹CardView，直接设置Figma的阴影参数：

<io.armcha.shadowlayout.ShadowLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:sl_shadowColor="#26000000" <!-- Figma阴影颜色 -->
    app:sl_shadowRadius="8dp" <!-- Figma模糊半径 -->
    app:sl_shadowDx="2dp" <!-- Figma X偏移 -->
    app:sl_shadowDy="4dp" <!-- Figma Y偏移 -->
    app:sl_shadowSpread="1dp"> <!-- Figma扩散半径 -->

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

        <!-- 内容布局 -->

    </androidx.cardview.widget.CardView>
</io.armcha.shadowlayout.ShadowLayout>

方案3：Android 12+用RenderEffect实现原生级阴影 #

Android 12（API 31）及以上支持RenderEffect，可以直接设置模糊+偏移的阴影效果，更贴近设计：

在代码中给CardView设置：

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
    // 创建模糊效果
    val blurEffect = RenderEffect.createBlurEffect(8f, 8f, Shader.TileMode.CLAMP)
    // 创建偏移效果
    val offsetEffect = RenderEffect.createOffsetEffect(2f, 4f)
    // 组合偏移+模糊效果
    cardView.setRenderEffect(RenderEffect.createChainEffect(offsetEffect, blurEffect))
    
    // 设置阴影颜色
    cardView.outlineProvider = object : ViewOutlineProvider() {
        override fun getOutline(view: View, outline: Outline) {
            outline.setRoundRect(0, 0, view.width, view.height, 12f)
        }
    }
    cardView.outlineAmbientShadowColor = Color.parseColor("#26000000")
    cardView.outlineSpotShadowColor = Color.parseColor("#26000000")
}

注意：所有方案都要保证CardView的圆角和阴影层的圆角完全一致，避免出现阴影和内容边角错位的问题。

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