Android Studio中Material UI TextField提示位置异常求助

问题场景 #

使用Material Design 2、Kotlin开发Android表单时，遇到TextInputLayout的提示文本在输入时过度左偏，无法正常定位的问题，效果如下：

相关代码 #

activity_main.xml #

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#eafaee"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:src="@drawable/copy___paste__2_" />


    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/username"
        >

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/username"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="20dp"
            />
    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/password"
        app:endIconMode="password_toggle">
        >

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="20dp"
            android:inputType="textPassword" />
    </com.google.android.material.textfield.TextInputLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="20dp"
        android:orientation="horizontal"
        android:textAlignment="center">

        <Button
            android:id="@+id/loginBtn"
            style="@style/Widget.Material3.Button.ElevatedButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:backgroundTint="#F8BA58"
            android:fontFamily="@font/niramit_bold"
            android:text="Login"
            android:width="160dp"
            android:height="40dp"
            />
    </LinearLayout>
</LinearLayout>

build.gradle (app模块) #

implementation 'androidx.core:core-ktx:1.8.0'
implementation 'androidx.appcompat:appcompat:1.6.1'
implementation 'com.google.android.material:material:1.12.0-alpha01'
implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
testImplementation 'junit:junit:4.13.2'
androidTestImplementation 'androidx.test.ext:junit:1.1.5'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'

问题原因及解决方案 #

核心问题 #

1. TextInputEditText的margin属性干扰布局计算：TextInputLayout的浮动提示位置基于内部EditText的布局边界计算，给EditText设置android:layout_margin="20dp"会导致提示定位逻辑偏差，引发左偏问题。
2. XML语法错误：第二个TextInputLayout标签末尾多了一个多余的>符号，可能影响布局解析。

修复步骤 #

1. 替换margin为padding实现内边距：将TextInputEditText的android:layout_margin替换为android:padding（或细分的paddingVertical/paddingHorizontal），内边距不会干扰外部布局的定位计算。
2. 修复XML语法错误：删除第二个TextInputLayout标签末尾多余的>。
3. 将外层间距移到TextInputLayout上：如果需要输入框与其他控件的间距，直接给TextInputLayout设置android:layout_margin即可。

修改后的代码示例 #

<!-- 用户名输入框 -->
<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/username"
    android:layout_margin="20dp">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/username"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingVertical="8dp"
        android:paddingHorizontal="16dp"/>
</com.google.android.material.textfield.TextInputLayout>

<!-- 密码输入框 -->
<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/password"
    app:endIconMode="password_toggle"
    android:layout_marginHorizontal="20dp"
    android:layout_marginBottom="20dp">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:paddingVertical="8dp"
        android:paddingHorizontal="16dp"/>
</com.google.android.material.textfield.TextInputLayout>

额外建议 #

• 统一Material组件版本：当前Button使用Material3样式，TextInputLayout为Material2组件，尽量保持风格统一，减少兼容性问题。
• 使用稳定版Material库：替换测试版material:1.12.0-alpha01为稳定版本（如1.11.0），避免未知bug。

内容的提问来源于stack exchange，提问作者Thirumalai K.G