Enabling both errorEnabled and passwordToggleEnabled in a TextInputLayout

Question

I want to set both errorEnabled and passwordToggleEnabled to true in a TextInputLayout, but it seems that these two can't coexist because the one covers the other like this.

I want to do this because I'm validating the password field to match a specific criteria and I want the user to be able to see both the error message and the password that's been typed in.

This is my code:

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:counterEnabled="true"
    app:errorEnabled="true"
    app:passwordToggleEnabled="true">

    <android.support.design.widget.TextInputEditText
        android:id="@+id/password_input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/password"
        android:inputType="textPassword" />

</android.support.design.widget.TextInputLayout>

Is it possible to move the passwordToggle-icon a bit to the left of the exclamation mark? Or do I have to create a custom drawable and use this instead of the passwordToggle-icon?

I can't see that it's possible to configure this in the TextInputLayout. How do you suggest to do this? The use of `android:layoutDirection="rtl"` just shifts the problem to the left side. — denlig, Jan 11 '18 at 12:16
@deling yes i was referring to that. So it seems it's a real problem. :) Have to tried giving android:layoutDirection="rtl" to textInputLayout and android:layoutDirection="ltr" to edittext and setting error to edittext too. ? — Umair, Jan 11 '18 at 12:21
@Umair Yes, tried it now. Almost worked, but the passwordToggle-icon is now hiding under the text when you type, [like this](https://imgur.com/VUjZRH7). Tried the opposite as well, but that didn't work either unfortunately. — denlig, Jan 11 '18 at 12:36
then you have three choices :) 1) add padding from start so that text doesn't mix. 2) make your own custom edittext 3) add an icon instead of passwordToggle_icon — Umair, Jan 11 '18 at 13:00

score 4 · Accepted Answer · answered Jan 11 '18 at 13:14

Try Setting setError() on TextInputLayout insead of TextInputEditText

xml

<android.support.design.widget.TextInputLayout
    android:id="@+id/ti_input"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:counterEnabled="true"
    app:errorEnabled="true"
    app:passwordToggleEnabled="true">

    <android.support.design.widget.TextInputEditText
        android:id="@+id/password_input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:inputType="textPassword" />

Code

    if(password_input.getText().toString().equals(""))
        ti_input.setError("Enter Password");
    else
        ti_input.setError(null);

Doesn't exactly do what I was initially thinking, but it actually seems to be a good solution anyways. This is the [result.](https://i.stack.imgur.com/ymSDq.png) The drawback is that you lose the exclamation mark, so from a interaction design perspective, you could argue that the error message is not as easy to see as it was. — denlig, Jan 11 '18 at 13:42

score 0 · Answer 2 · answered Jan 11 '18 at 13:46

0

This works for me. don't use setError() on the EditText, use TextInputLayout's setError()

answered Jan 11 '18 at 13:46

Bishoy Kamel

2,327
2
17
29

Enabling both errorEnabled and passwordToggleEnabled in a TextInputLayout

2 Answers2