如何为 TextInputLayout 设置自定义错误背景

Question

每当我收到无效的电子邮件时，我想为我的电子邮件输入字段显示自定义错误背景。

到目前为止，我能找到的只是如何设置和自定义错误文本，这也使它的背景颜色偏红。

我一直在尝试将这个背景更改为我所期望的。

这是我的布局

 <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/email_field"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="24dp"
            android:layout_marginTop="24dp"
            android:layout_marginEnd="24dp"
            android:elevation="2dp"
            app:boxBackgroundMode="none"
            app:errorEnabled="true"
            app:hintEnabled="false"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView">

            <EditText
                android:id="@+id/input_email"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:background="@drawable/input_field"
                android:drawableStart="@drawable/ic_baseline_account_circle_24"
                android:drawablePadding="8dp"
                android:fontFamily="@font/app_font_regular"
                android:hint="@string/label_email"
                android:imeOptions="actionNext"
                android:inputType="textEmailAddress"
                android:maxLines="1"
                android:padding="8dp"
                android:textColor="@color/textColor" />
        </com.google.android.material.textfield.TextInputLayout>

这是我的 input_field drawble

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true">
        <shape android:shape="rectangle">
            <corners android:radius="8dp" />
            <stroke android:width="1dp" android:color="@color/colorPrimary" />
            <solid android:color="@color/inputField" />
        </shape>
    </item>

    <item android:state_checked="true"  >
        <shape android:shape="rectangle">
            <corners android:radius="8dp" />
            <stroke android:width="1dp" android:color="@color/failed" />
            <solid android:color="@color/inputField" />
        </shape>
    </item>

    <item>
        <shape android:shape="rectangle">
            <corners android:radius="8dp" />
            <stroke android:width="1dp" android:color="@color/inputFieldBorder" />
            <solid android:color="@color/inputField" />
        </shape>
    </item>
</selector>

为了显示错误，我在 TextInputLayout 上使用此方法调用

email_field.error = "Invalid Email"

这是我的用户界面，没有错误

这是我设置错误时的 UI

这是我希望实现的 UI。

Answer 1

你不需要使用android:background="@drawable/input_field"。

只需使用：

        <com.google.android.material.textfield.TextInputLayout
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            app:placeholderText="Email"
            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.rounded8dp"
            app:boxStrokeErrorColor="@color/..."
            app:boxStrokeColor=""
            app:startIconDrawable="@drawable/...">

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

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

与：

<style name="ShapeAppearanceOverlay.App.rounded8dp" parent="">
    <item name="cornerSize">8dp</item>
</style>

随着

• app:boxStrokeColor 定义笔画的选择器
• app:boxStrokeErrorColor 定义显示错误时笔划使用的颜色。

boxStrokeColor 的默认值为：

您可以使用选择器。它是默认值：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="?attr/colorPrimary" android:state_focused="true"/>
  <item android:alpha="0.87" android:color="?attr/colorOnSurface" android:state_hovered="true"/>
  <item android:alpha="0.12" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
  <item android:alpha="0.38" android:color="?attr/colorOnSurface"/>
</selector>

Answer 2

您可以使用app:boxStrokeColor

<com.google.android.material.textfield.TextInputLayout
        ...
        app:boxBackgroundColor="@color/colorWhite"
        app:boxStrokeColor="@color/colorRed">
 ...
</com.google.android.material.textfield.TextInputLayout>