How to remove background error red color from com.google.android.material.textfield.TextInputLayout

Question

I am new at using material design. I have custom background but my TextInputEditText background red when i set error message; it shows on touch in TextInputEditText.

How can i remove this red error background from TextInputEditText,

Here is my design 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>

Here is my style.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>

Here is my custom background

<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>

Here is image

Answer 1

Don't use the android:background on the TextInputEditText. Just apply the style 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>

with this simple shapeAppearanceOverlay

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