Android Kotlin中为Material TextInputLayout添加阴影的问题求助

问题背景 #

在Android Kotlin项目中使用Material组件的TextInputLayout，想要添加阴影（elevation）实现目标UI，但尝试多种自定义及默认配置均未生效。

现有自定义样式 #

<style name="CustomTextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:background">#FFFFFF</item>
    <item name="boxCornerRadiusTopStart">13dp</item>
    <item name="boxCornerRadiusTopEnd">13dp</item>
    <item name="boxCornerRadiusBottomStart">13dp</item>
    <item name="boxCornerRadiusBottomEnd">13dp</item>
    <item name="hintTextAppearance">@style/CustomHintTextAppearance</item>
</style>

<style name="CustomHintTextAppearance" parent="TextAppearance.Design.Hint">
    <item name="fontFamily">@font/poppins_med</item>
    <item name="android:textSize">16sp</item>
    <item name="android:textStyle">bold</item>
    <item name="android:letterSpacing">0</item>
    <item name="android:textColor">#777777</item>
</style>

现有布局代码 #

<com.google.android.material.textfield.TextInputLayout
        android:id="@+id/tilEmail"
        android:layout_marginBottom="@dimen/_5sdp"
        style="@style/CustomTextInputLayout">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:autofillHints="emailAddress"
            android:inputType="textEmailAddress"
            android:hint="@string/email"
            android:textSize="@dimen/_12sdp" />
</com.google.android.material.textfield.TextInputLayout>

当前与期望UI #

• 当前UI：
• 期望UI：

解决方法 #

TextInputLayout的OutlinedBox样式默认不直接响应elevation属性，因为它的背景是自定义Drawable而非标准Material背景，可通过以下两种方式实现阴影效果：

方法1：使用MaterialShapeDrawable渲染阴影 #

修改自定义样式，移除硬编码背景色，改用MaterialShapeDrawable实现背景与阴影：

<style name="CustomTextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <!-- 设置阴影高度，数值可根据需求调整 -->
    <item name="android:elevation">4dp</item>
    <item name="boxCornerRadiusTopStart">13dp</item>
    <item name="boxCornerRadiusTopEnd">13dp</item>
    <item name="boxCornerRadiusBottomStart">13dp</item>
    <item name="boxCornerRadiusBottomEnd">13dp</item>
    <item name="hintTextAppearance">@style/CustomHintTextAppearance</item>
    <!-- 绑定自定义形状配置 -->
    <item name="shapeAppearanceOverlay">@style/CustomTextInputShape</item>
    <!-- 设置输入框背景色 -->
    <item name="android:backgroundTint">#FFFFFF</item>
</style>

<style name="CustomTextInputShape" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">13dp</item>
</style>

方法2：嵌套在CardView中实现阴影 #

若方法1不生效，可将TextInputLayout嵌套在CardView内，利用CardView的原生阴影能力：

<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="@dimen/_5sdp"
    app:cardCornerRadius="13dp"
    app:cardElevation="4dp"
    app:cardBackgroundColor="#FFFFFF">

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/tilEmail"
        style="@style/CustomTextInputLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="2dp"> <!-- 避免输入框边框与CardView重叠 -->

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:autofillHints="emailAddress"
            android:inputType="textEmailAddress"
            android:hint="@string/email"
            android:textSize="@dimen/_12sdp" />
    </com.google.android.material.textfield.TextInputLayout>
</androidx.cardview.widget.CardView>

同时修改CustomTextInputLayout，移除硬编码背景属性：

<style name="CustomTextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="boxCornerRadiusTopStart">13dp</item>
    <item name="boxCornerRadiusTopEnd">13dp</item>
    <item name="boxCornerRadiusBottomStart">13dp</item>
    <item name="boxCornerRadiusBottomEnd">13dp</item>
    <item name="hintTextAppearance">@style/CustomHintTextAppearance</item>
</style>

注意事项 #

• 确保项目依赖最新版本的Material Components库：

implementation 'com.google.android.material:material:1.9.0' // 或更高版本

• 原生elevation效果仅在Android 5.0（API 21）及以上生效，低版本兼容建议使用CardView方案。

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