Android中如何实现按钮顶部阴影（模拟上方光照效果）

目标效果：按钮带有底部黑色阴影和顶部白色高光（模拟上方光照），当前使用MaterialCardView仅能实现圆角和底部阴影，无法呈现顶部高光的锐利风格。

当前实现代码：

<com.google.android.material.card.MaterialCardView
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:layout_marginEnd="10dp"
    app:cardCornerRadius="20dp"
    app:cardBackgroundColor="@color/tuna2"
    app:strokeColor="@color/gun_powder"
    app:cardElevation="6dp"
    app:contentPadding="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent" >

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

        <TextView
            android:id="@+id/textView28"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/transfer"
            android:textColor="@color/white"
            android:layout_marginStart="30dp"
            android:layout_marginEnd="37dp"
            android:fontFamily="@font/dm_sans"
            android:textSize="14sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:id="@+id/imageView23"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="3dp"
            app:layout_constraintBottom_toBottomOf="@+id/textView28"
            app:layout_constraintStart_toEndOf="@+id/textView28"
            app:layout_constraintTop_toTopOf="@+id/textView28"
            app:srcCompat="@drawable/ic_arrow_right" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>

当前实现的按钮无顶部白色高光，无法达到目标效果，以下是解决方案：

解决方案：使用LayerList自定义背景 #

MaterialCardView的默认阴影无法实现顶部高光，我们可以通过自定义layer-list drawable来同时实现圆角、边框、底部阴影和顶部高光。

步骤1：创建自定义背景drawable #

在res/drawable目录下创建button_background.xml文件：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 底部阴影层：半透明黑色，偏移形成底部阴影 -->
    <item android:bottom="2dp">
        <shape android:shape="rectangle">
            <corners android:radius="20dp"/>
            <solid android:color="#20000000"/>
        </shape>
    </item>

    <!-- 按钮主体层：背景色、圆角、边框 -->
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="20dp"/>
            <solid android:color="@color/tuna2"/>
            <stroke android:width="1dp" android:color="@color/gun_powder"/>
        </shape>
    </item>

    <!-- 顶部高光层：线性渐变，从顶部白色透明到底部完全透明 -->
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="20dp"/>
            <gradient
                android:startColor="#40FFFFFF"
                android:endColor="@android:color/transparent"
                android:angle="270"
                android:type="linear"/>
        </shape>
    </item>
</layer-list>

步骤2：修改布局文件 #

将原有的MaterialCardView替换为普通ConstraintLayout（或保留CardView但移除相关自带属性），设置自定义背景：

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:layout_marginEnd="10dp"
    android:background="@drawable/button_background"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <TextView
        android:id="@+id/textView28"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/transfer"
        android:textColor="@color/white"
        android:layout_marginStart="30dp"
        android:layout_marginEnd="37dp"
        android:fontFamily="@font/dm_sans"
        android:textSize="14sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/imageView23"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="3dp"
        app:layout_constraintBottom_toBottomOf="@+id/textView28"
        app:layout_constraintStart_toEndOf="@+id/textView28"
        app:layout_constraintTop_toTopOf="@+id/textView28"
        app:srcCompat="@drawable/ic_arrow_right" />
</androidx.constraintlayout.widget.ConstraintLayout>

效果说明 #

• 底部阴影层通过向下偏移和半透明黑色，模拟按钮悬浮的阴影效果；
• 顶部高光层使用线性渐变，从顶部的白色透明过渡到透明，完美模拟上方光照的高光效果；
• 主体层保留原有的背景色、圆角和边框样式，与原设计一致。

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