Android中TextInputEditText获焦时左右出现白线的问题求助

问题背景 #

在Android开发中遇到一个Bug：使用基础ConstraintLayout布局包含TextInputEditText，为实现控件获焦时底部边框为黑色，修改了themes.xml中的colorSecondary为黑色，结果在S9+和Pixel 4XL设备上，控件获焦时左右两侧会出现细小水平白线。

布局代码 #

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">


    <com.google.android.material.textfield.TextInputEditText
        android:layout_margin="50dp"
        android:layout_width="0dp"
        android:layout_height="60dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

主题修改代码 #

<item name="colorSecondary">@color/black</item>

问题截图 #

问题成因 #

这个问题是Material Components库中TextInputEditText的默认下划线绘制逻辑导致的：

• TextInputEditText获焦状态下的下划线，是由左右两个端盖和中间横线组成的复合Drawable。
• 修改全局colorSecondary为黑色后，中间横线的颜色会被设为黑色，但左右端盖的颜色并没有被正确覆盖——它们默认使用主题里的淡色系统色，当背景和横线都是深色时，这类淡色端盖就会显现为白色细线。
• S9+和Pixel 4XL属于高像素密度屏幕，这种细微的颜色差异会被放大，更容易被察觉。

另外，直接修改colorSecondary来控制输入框下划线颜色并不符合Material Design规范，colorSecondary是全局主题的次要颜色，负责整个App的次要UI元素色调，强行用它来单独控制输入框样式，很容易引发这类UI绘制冲突。

补充解决建议 #

如果要正确设置获焦时的下划线颜色，建议配合TextInputLayout来配置（Material Design规范中TextInputEditText建议嵌套在TextInputLayout中使用）：

1. 调整布局结构，用TextInputLayout包裹TextInputEditText，直接指定下划线颜色：

<com.google.android.material.textfield.TextInputLayout
    android:layout_margin="50dp"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:boxStrokeColor="@color/black"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

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

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

2. 或者在主题中单独配置输入框样式，避免修改全局colorSecondary：

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
    <!-- 其他主题属性 -->
    <item name="textInputStyle">@style/CustomTextInputStyle</item>
</style>

<style name="CustomTextInputStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="boxStrokeColor">@color/black</item>
</style>

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