如何從 com.google.android.material.textfield.TextInputLayout 中刪除背景錯誤紅色

Question

我是使用材料設計的新手。 我有自定義背景，但是當我設置錯誤消息時我的TextInputEditText背景為紅色； 它在TextInputEditText中顯示。

如何從TextInputEditText中刪除此紅色錯誤背景，

這是我的設計 xml

<com.google.android.material.textfield.TextInputLayout
            android:id="@+id/userIdLayout"
            android:layout_width="wrap_content"
            app:boxBackgroundMode="none"
            app:boxBackgroundColor="@android:color/transparent"
            app:hintEnabled="false"
            app:errorEnabled="true"
            app:errorTextColor="@color/red"
            android:layout_height="wrap_content">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/userId"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:backgroundTintMode="@null"
                android:background="@drawable/border_blue_fill_white_rectangle"
                android:drawableStart="@drawable/ic_account"
                android:drawablePadding="8dp"
                android:ems="14"
                android:fontFamily="@font/carrois_gothic"
                android:hint="@string/userId"
                android:longClickable="false"
                android:inputType="text"
                android:maxLines="1"
                android:paddingStart="16dp"
                android:paddingTop="12dp"
                android:paddingEnd="24dp"
                android:paddingBottom="12dp"
                android:text="@={LoginViewModel.userId}"
                android:textSize="16sp"
                android:textColor="@color/colorPrimaryDark"
                android:importantForAutofill="no" />

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

這是我的風格。xml

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="colorError">@android:color/transparent</item>
    <item name="windowActionBar">false</item>
    <item name="editTextBackground">@color/white</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:actionMenuTextAppearance">@style/AppTheme.PopupOverlay</item>
</style>

這是我的自定義背景

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle"
android:color="@android:color/transparent" >
<solid android:color="@android:color/white" />
<corners android:radius="32dp" />
    <stroke
        android:width="2px"
        android:color="@color/colorPrimaryDark" />
</shape>

這是圖像

Answer 1

不要在TextInputEditText上使用android:background 。 只需應用樣式Widget.MaterialComponents.TextInputLayout.OutlinedBox ：

<com.google.android.material.textfield.TextInputLayout
            app:boxStrokeColor="@color/..."
            app:boxBackgroundColor="@color/white"
            android:hint="..."
            app:startIconDrawable="@drawable/...."
            app:shapeAppearanceOverlay="@style/corner32"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            ....>

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/userId"
                android:drawablePadding="8dp"
                android:ems="14"
                android:longClickable="false"
                android:inputType="text"
                android:maxLines="1"
                android:paddingStart="16dp"
                android:paddingTop="12dp"
                android:paddingEnd="24dp"
                android:paddingBottom="12dp"
                android:text="User id"
                android:textSize="16sp"
                android:textColor="@color/colorPrimaryDark"
                android:importantForAutofill="no"
                .... />

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

用這個簡單shapeAppearanceOverlay

<style name="corner32" parent="">
    <item name="cornerSize">32dp</item>
</style>