Android注册Fragment中如何移除AutoCompleteTextView的黑色背景？

问题描述 #

我在开发注册Fragment时，遇到一个问题：TextInputLayout中的AutoCompleteTextView显示黑色背景，需要移除该黑色背景。

相关代码 #

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/textInputLayout"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="32dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="32dp"
    android:background="@drawable/edittext_bg"
    android:textColorHint="#7E7C7C"
    app:boxStrokeColor="#24d95f"
    app:boxStrokeWidth="0dp"
    app:boxStrokeWidthFocused="0dp"
    app:endIconTint="#24d95f"
    app:hintTextColor="#24d95f"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/reg_confirmpassword">
    <AutoCompleteTextView
        android:id="@+id/auto_complete_text"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:textColor="@color/black"
        android:backgroundTint="@color/white"
        android:background="@drawable/edittext_bg"
        android:inputType="none" />
</com.google.android.material.textfield.TextInputLayout>

解决方案 #

问题根源是手动给TextInputLayout和AutoCompleteTextView设置了自定义背景，与Material组件的默认样式冲突，按以下步骤修改即可：

1. 移除多余的背景属性
   删除TextInputLayout的android:background="@drawable/edittext_bg"，同时删除AutoCompleteTextView的android:background="@drawable/edittext_bg"和android:backgroundTint="@color/white"。

2. 通过Material组件属性控制背景
   在TextInputLayout中添加app:boxBackgroundColor="@color/white"，统一控制输入区域的背景色，符合Material组件的设计规范。

3. 修改后的完整代码

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/textInputLayout"
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="32dp"
    android:layout_marginTop="16dp"
    android:layout_marginEnd="32dp"
    android:textColorHint="#7E7C7C"
    app:boxStrokeColor="#24d95f"
    app:boxStrokeWidth="0dp"
    app:boxStrokeWidthFocused="0dp"
    app:endIconTint="#24d95f"
    app:hintTextColor="#24d95f"
    app:boxBackgroundColor="@color/white"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/reg_confirmpassword">

    <AutoCompleteTextView
        android:id="@+id/auto_complete_text"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:textColor="@color/black"
        android:inputType="none" />

</com.google.android.material.textfield.TextInputLayout>

说明 #

Material的OutlinedBox.ExposedDropdownMenu样式已经内置了输入区域的背景、边框逻辑，手动设置控件的background会破坏这种逻辑，导致出现异常黑色背景。使用组件自身的属性控制外观，能更好地保持样式一致性，避免冲突问题。

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