使用TextInputLayout时密码切换引发自定义背景异常的解决求助

我想要实现自定义EditText样式，但使用TextInputLayout并开启密码切换按钮时，自定义背景出现异常。当前使用的布局代码如下：

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:textColorHint="@color/textHint"
    app:endIconMode="password_toggle"
    app:endIconTint="@color/textHint"

    android:layout_marginStart="50dp"
    android:layout_marginEnd="42dp"
    android:layout_marginTop="10dp"
    android:hint="@string/password"
    app:hintTextColor="@color/textHint"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    >

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/edittext_background"
        android:inputType="textPassword"
        />
</com.google.android.material.textfield.TextInputLayout>

问题出在你同时给TextInputLayout设置了OutlinedBox系统样式，又给内部的TextInputEditText单独设置自定义背景，两者的背景渲染逻辑发生冲突，导致显示异常。以下是两种可行的解决方式：

方式一：移除系统样式，完全自定义EditText背景 #

删掉TextInputLayout的style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"属性，同时调整EditText的内边距，避免密码切换按钮被自定义背景遮挡：

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textColorHint="@color/textHint"
    app:endIconMode="password_toggle"
    app:endIconTint="@color/textHint"
    android:layout_marginStart="50dp"
    android:layout_marginEnd="42dp"
    android:layout_marginTop="10dp"
    android:hint="@string/password"
    app:hintTextColor="@color/textHint">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/edittext_background"
        android:inputType="textPassword"
        android:paddingEnd="60dp" <!-- 为密码切换按钮预留空间 -->
        android:paddingStart="16dp"
        android:paddingTop="12dp"
        android:paddingBottom="12dp"/>
</com.google.android.material.textfield.TextInputLayout>

提示：建议你的edittext_background drawable包含正常、获取焦点、错误等不同状态的样式，保证输入框有完整的交互反馈。

方式二：基于Material系统样式自定义，不单独设置EditText背景 #

如果想保留Material组件原生的交互效果（比如焦点时边框变色、浮动提示框等），可以通过修改TextInputLayout的样式来实现自定义，无需给EditText设置背景：

1. 在res/values/styles.xml中添加自定义样式：

<style name="CustomOutlinedTextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <!-- 自定义边框颜色 -->
    <item name="boxStrokeColor">@color/your_custom_stroke_color</item>
    <!-- 自定义背景色 -->
    <item name="boxBackgroundColor">@color/your_custom_bg_color</item>
    <!-- 自定义圆角大小 -->
    <item name="boxCornerRadiusTopStart">8dp</item>
    <item name="boxCornerRadiusTopEnd">8dp</item>
    <item name="boxCornerRadiusBottomStart">8dp</item>
    <item name="boxCornerRadiusBottomEnd">8dp</item>
</style>

2. 修改布局代码，应用自定义样式：

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textColorHint="@color/textHint"
    app:endIconMode="password_toggle"
    app:endIconTint="@color/textHint"
    android:layout_marginStart="50dp"
    android:layout_marginEnd="42dp"
    android:layout_marginTop="10dp"
    android:hint="@string/password"
    app:hintTextColor="@color/textHint"
    style="@style/CustomOutlinedTextInputLayout">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:paddingStart="16dp"
        android:paddingTop="12dp"
        android:paddingBottom="12dp"/>
</com.google.android.material.textfield.TextInputLayout>

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