使用com.google.android.material.textfield.TextInputLayout时提示文本与OutlinedBox重叠问题求助

嘿，我来帮你搞定这个hint和OutlinedBox边框重叠的问题！

问题原因 #

你遇到的核心问题是给TextInputEditText设置了自定义背景@drawable/edittextbox——Material Components库的OutlinedBox风格TextInputLayout是和内部TextInputEditText的默认背景样式协同工作的，自定义背景会完全覆盖掉EditText的默认布局逻辑（包括内边距、边框定位等），从而导致hint文本和边框重叠。

解决方案 #

我们需要移除EditText的自定义背景，改用TextInputLayout的自带属性来实现你想要的样式效果：

1. 移除TextInputEditText的android:background属性

这是关键一步，让EditText恢复使用Material组件的默认背景，保证TextInputLayout能正确计算布局位置。

2. 通过TextInputLayout属性自定义边框样式

如果你需要原来edittextbox中的圆角、边框颜色，可以直接在TextInputLayout上设置以下属性：

• app:boxCornerRadiusTopStart/app:boxCornerRadiusTopEnd/app:boxCornerRadiusBottomStart/app:boxCornerRadiusBottomEnd：设置边框圆角（对应你原来的corners android:radius="4dp"）
• app:boxStrokeColor：设置边框颜色（对应你原来的stroke android:color="@color/black"）

3. 设置EditText内边距

如果你需要原来的内边距效果，直接给TextInputEditText设置android:padding相关属性即可。

修改后的完整代码示例 #

<com.google.android.material.textfield.TextInputLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:textColorHint="@color/gray" 
    app:passwordToggleDrawable="@drawable/show_password" 
    android:hint="Password" 
    android:focusable="true" 
    app:hintTextColor="@color/black" 
    app:endIconMode="password_toggle" 
    style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
    app:boxCornerRadiusTopStart="4dp"
    app:boxCornerRadiusTopEnd="4dp"
    app:boxCornerRadiusBottomStart="4dp"
    app:boxCornerRadiusBottomEnd="4dp"
    app:boxStrokeColor="@color/black">
    <com.google.android.material.textfield.TextInputEditText 
        android:id="@+id/etLoginPassword" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:fontFamily="@font/aileron_regular_webfont" 
        android:textCursorDrawable="@null" 
        android:layout_gravity="center_vertical" 
        android:inputType="textPassword" 
        android:imeOptions="actionDone" 
        android:tag="Please enter password." 
        android:paddingStart="10dp"
        android:paddingEnd="10dp"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"/>
</com.google.android.material.textfield.TextInputLayout>

额外提示 #

使用Material Components的TextInputLayout时，尽量不要修改内部EditText的背景样式，所有边框、圆角、内边距等样式都应该通过TextInputLayout的属性来配置，这样才能保证组件的布局逻辑正常工作，避免出现类似的重叠问题。

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