Android TextInputLayout实现提示语在输入框内的问题求助

我想要创建一个提示语（hint）始终位于输入框内部的TextInputLayout，尝试使用OutlinedBox和Filled样式时，发现用Filled样式并给布局设置背景后，提示语的位置会出现偏移错误。现有代码如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/my_view_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/textValue"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="32dp"
        android:layout_marginRight="16dp"
        android:hint="label">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

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

解决方案 #

要实现提示语始终在输入框内部的效果，推荐使用Filled样式，并通过正确方式定制背景，避免干扰TextInputLayout的内部布局逻辑：

• 正确设置Filled样式背景
  不要直接给TextInputLayout设置android:background，这会破坏它的默认布局结构，导致提示语位置错乱。可以通过以下两种方式处理：

  1. 给内部EditText设置背景
     直接为TextInputEditText设置自定义背景，并调整内边距，保证提示语位置正常：

     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:id="@+id/my_view_layout"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:orientation="vertical">
     
         <com.google.android.material.textfield.TextInputLayout
             android:id="@+id/textValue"
             style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:layout_marginHorizontal="16dp"
             android:layout_marginTop="32dp"
             android:hint="label">
     
             <com.google.android.material.textfield.TextInputEditText
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:background="@drawable/custom_edit_bg"
                 android:paddingVertical="12dp"
                 android:paddingHorizontal="16dp"/>
     
         </com.google.android.material.textfield.TextInputLayout>
     </LinearLayout>
     

  2. 自定义Filled样式
     在styles.xml中定义继承自FilledBox的自定义样式，通过boxBackgroundColor修改背景色：

     <style name="CustomFilledTextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
         <item name="boxBackgroundColor">@color/your_custom_bg</item>
         <item name="hintTextColor">@color/your_hint_color</item>
         <!-- 可添加其他自定义属性 -->
     </style>
     

     然后在布局中使用该样式：

     <com.google.android.material.textfield.TextInputLayout
         android:id="@+id/textValue"
         style="@style/CustomFilledTextInputLayout"
         <!-- 其他布局属性 -->
         >
         <!-- TextInputEditText -->
     </com.google.android.material.textfield.TextInputLayout>
     

• 关键注意点
  直接给TextInputLayout设置android:background会覆盖它的默认填充层和提示语定位逻辑，这是导致提示语位置错误的核心原因，务必避免这种操作。

内容的提问来源于stack exchange，提问作者Owies AL omari