Material-components-android: Error icon and password icon overlapping

[wahdatjan]

Overlapping of error icon and show password icon .When both are visible.

[leticiarossi]

Can you provide your source code?

[wahdatjan]

yes here it is
`
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/register_root"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_marginBottom="8dp"
android:layout_marginEnd="24dp"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
xmlns:android="http://schemas.android.com/apk/res/android">
android:id="@+id/login_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/loginHeader"
android:text="Login"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="@dimen/loginViewsMargin"/>

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/textInputEmail"
    style="@style/parent"
    android:layout_marginTop="@dimen/loginViewsMargin"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/login_label"
    >

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/editTextEmail"
        style="@style/modifiedEditText"
        android:hint="@string/login_email_hint"
        android:textSize="@dimen/editTextTextSize"
        android:inputType="textEmailAddress"
        android:maxLines="1" />
</com.google.android.material.textfield.TextInputLayout>


<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/textInputPassword"
    style="@style/parent"
    app:passwordToggleEnabled="true"
    android:layout_marginTop="@dimen/loginViewsMargin"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/textInputEmail"
    >

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/editTextPassword"
        style="@style/modifiedEditText"
        android:hint="@string/login_password_hint"
        android:textSize="@dimen/editTextTextSize"
        android:inputType="textPassword"
        android:maxLines="1" />
</com.google.android.material.textfield.TextInputLayout>

<Button
    android:id="@+id/login_button"
    style="@style/loginButton"
    android:text="Login"
    android:layout_marginTop="@dimen/loginViewsMargin"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/textInputPassword"

    />

<TextView
    android:id="@+id/signUpLink"
    style="@style/parent"
    android:textAlignment="textEnd"
    android:textStyle="bold"
    android:textColor="@color/primaryTextColor"
    android:text="New User? SignUp here "
    android:layout_marginTop="10dp"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/login_button"
    app:layout_constraintLeft_toLeftOf="parent"
    />

`

[msfjarvis]

Not sure if that's what the OP did, but in my case this issue was triggered because of Kotlin converting setError to its property syntax. That caused things to be delegated to platform TextView's setError(String) method as opposed to TextInputEditText's setError(String, Drawable). I believe the fix here from the MDC side would be to just override setError(String) and call setError(String, getDrawable(R.drawable.mtrl_ic_error)) for users.

Edit: Here's the commit showing the change that resolved this for me https://msfjarvis.dev/aps/317eb00fa358

[LaurieScheepers]

The workaround in your commit causes the error icon to disappear on my side.

[msfjarvis]

The workaround in your commit causes the error icon to disappear on my side.

You're right, I was doing more than one thing wrong. Properly fixed here: https://msfjarvis.dev/aps/3c0665d33133

[LaurieScheepers]

Your updated solution still causes the error icon to disappear as you are setting the error on the input layout, not the edit text. Doing it your way causes the visibility icon to show, but the error icon and tooltip goes away, which is the functionality I'm after.

[msfjarvis]

Your updated solution still causes the error icon to disappear as you are setting the error on the input layout, not the edit text. Doing it your way causes the visibility icon to show, but the error icon and tooltip goes away, which is the functionality I'm after.

I see. The commit I linked makes the error message match Material specifications so I believe your use case is different from what I was going for.

[LaurieScheepers]

Going back to the original bug-report: the two icons overlap, meaning there is no current way to enable both password visibility toggling and have the error icon showing properly on the edit text.

You might have solved your problem, but the bug persists.

Thanks for the help anyway :)

[leticiarossi]

It seems like you're using a Widget.Design.TextInputLayout style, is that the case? That style isn't completely supported anymore - it doesn't support showing the error icon. Can you switch to using one of the Widget.MaterialComponents.TextInputLayout.* styles and check if the issue persists?
If you can't, I think the best alternative is to use a TextWatcher so that you can control when to show/hide the icons.