Android EditText自定义阴影效果及低版本兼容方案咨询

问题描述 #

我需要为EditText实现对应的阴影效果，目前我通过以下代码已部分复现对应效果：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SignupActivity">
    <ImageView
        android:id="@+id/signinPageLogo"
        android:layout_width="171dp"
        android:layout_height="160dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="132dp"
        android:src="@drawable/dummy_logo" />

    <TextView
        android:id="@+id/signinAppName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/signinPageLogo"
        android:layout_centerHorizontal="true"
        android:text="@string/welcomePageText1"
        android:textSize="30sp"
        android:textStyle="bold" />

    <androidx.cardview.widget.CardView
        android:id="@+id/signinEmailIdCardView"
        android:layout_width="234dp"
        android:layout_height="73dp"
        android:layout_below="@+id/signinAppName"
        android:layout_centerHorizontal="true"
        android:layout_marginStart="6dp"
        android:layout_marginTop="109dp"
        android:layout_marginEnd="6dp"
        android:outlineSpotShadowColor="@color/teal_700"
        android:layout_marginBottom="10dp"
        app:cardCornerRadius="10dp"
        app:cardElevation="4dp"
        app:cardUseCompatPadding="true">

        <EditText
            android:id="@+id/signinEmailId"
            android:layout_width="211dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@drawable/rounded_edittext"
            android:hint="@string/signinPageText1"
            android:inputType="textEmailAddress"
            android:padding="10dp" />
    </androidx.cardview.widget.CardView>
    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/signinPassword"
        android:layout_width="211dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/signinEmailIdCardView"
        android:layout_centerHorizontal="true"
        app:boxBackgroundColor="@color/white"
        app:boxBackgroundMode="none"
        app:hintEnabled="false"
        app:passwordToggleDrawable="@drawable/show_password_selector"
        app:passwordToggleEnabled="true">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/signinPageText2"
            android:inputType="textPassword" />
    </com.google.android.material.textfield.TextInputLayout>

    <TextView
        android:id="@+id/signinForgotPass"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/signinPassword"
        android:layout_alignEnd="@id/signinPassword"
        android:text="@string/signinPageText3" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/signinButton"
        android:layout_width="256dp"
        android:layout_height="64dp"
        android:layout_below="@+id/signinForgotPass"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:background="@drawable/button_style"
        android:gravity="center"
        android:text="@string/welcomePageText1"
        android:textAllCaps="false" />
</RelativeLayout>

我需要拉长阴影长度以达到符合设计的效果，此外android:outlineSpotShadowColor属性仅支持API 28及以上版本，需要兼容更低版本的实现方案。

可行解决方案 #

以下两种方案均兼容API 16及以上版本，可自由调整阴影长度、颜色：

方案1：自定义layer-list背景（无额外依赖） #

直接给EditText设置自定义阴影背景，不需要嵌套CardView：
在res/drawable目录下新建edittext_shadow_bg.xml：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 阴影层，调整left/top属性控制阴影偏移和长度，调整solid颜色修改阴影色 -->
    <item
        android:left="2dp"
        android:top="6dp">
        <shape>
            <corners android:radius="10dp" />
            <solid android:color="@color/teal_700" />
        </shape>
    </item>
    <!-- 上层输入框底色层，对应bottom/right属性要和阴影层偏移量匹配 -->
    <item
        android:bottom="6dp"
        android:right="2dp">
        <shape>
            <corners android:radius="10dp" />
            <solid android:color="@color/white" />
            <stroke android:width="1dp" android:color="@color/light_gray" />
        </shape>
    </item>
</layer-list>

使用时直接把EditText的background属性设置为这个drawable即可，需要拉长阴影只需对应调大阴影层的top/left值、上层的bottom/right值即可。

方案2：使用MaterialShapeDrawable实现原生兼容阴影 #

如果项目已引入Material Components 1.2.0+版本，可直接通过代码生成可配置的兼容阴影：

// Kotlin实现示例
val cornerRadius = resources.getDimension(R.dimen.edittext_corner_radius)
val shapeModel = ShapeAppearanceModel.builder()
    .setAllCorners(CornerFamily.ROUNDED, cornerRadius)
    .build()
val shadowBg = MaterialShapeDrawable(shapeModel).apply {
    fillColor = ColorStateList.valueOf(Color.WHITE)
    // 强制开启兼容阴影，不依赖高版本API
    shadowCompatibilityMode = MaterialShapeDrawable.SHADOW_COMPAT_MODE_ALWAYS
    setShadowColor(ContextCompat.getColor(context, R.color.teal_700))
    // 调整elevation数值直接控制阴影长度
    elevation = resources.getDimension(R.dimen.shadow_elevation)
}
// 给输入框设置背景
editText.background = shadowBg

该方案的阴影为系统渲染的原生阴影，效果更自然，不需要手动调整偏移参数。

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