While use TextInputEditText, the error icon override the end icon

Question

I am developing an interface that contains a component TextInputLayout. Here is my layout code:

    <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
        android:id="@+id/username_label"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:startIconDrawable="@drawable/icons8_user_24"
        app:endIconMode="custom"
        app:endIconDrawable="@drawable/icons8_user_24"
        app:errorEnabled="true"
        android:hint="Enter UserName"
        android:textColorHint="@color/teal_200">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/edit_text"
            android:inputType="text" />

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

and here is the java code:

    UsereditText.addTextChangedListener(new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {

        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
            if (s != null && !isEmailAddress(s.toString())) {
                UsereditText.setError("Error Address");
            } else {
                UsereditText.setError(null);
            }

        }

        @Override
        public void afterTextChanged(Editable s) {

        }
    });

and result image is:

However, I saw someone did it perfectly, don't know how.

I am emo now, please help!

Thanks.

Answer 1

UPDATED ANSWER (after more info added)

Try calling the setError() on the TextInputLayout instead of the TextInputEditText. The view itself will then make sure that the error icon doesn't overlap with the end icon.

---

Don't place the edit icon as a background drawable, try putting it as drawableEnd instead:

<com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableEnd="@drawable/edit_text"
            android:inputType="text" />

Answer 2

Update Answer

Actually, I'm following this XML code below

 <com.google.android.material.textfield.TextInputLayout
                    android:id="@+id/enter_mail_text"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="@dimen/dimen_20dp"
                    android:layout_marginEnd="@dimen/dimen_20dp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent">

                    <com.google.android.material.textfield.TextInputEditText
                        android:id="@+id/mail"
                        style="@style/TextViewStyleRegular"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:background="@android:color/white"
                        android:hint="@string/enter_mail_2"
                        android:inputType="textEmailAddress|textNoSuggestions"
                        android:maxLength="50" />

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

Kotlin Code

binding.enterMailText.setErrorIconDrawable(R.drawable.no_icon)
        binding.enterMailText.error = "Please enter valid email address"

no_icon.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
</selector>