password toggle icon textinputlayout override error icon

Question

I am using a password toggle to show and hide the password. And I do not want to use the custom drawable. But, when this edit text generate error it overrides the toggle password icon and unable to add padding or margin to that icon. If there is any solution to this, it will be a pleasure. This is the code I am using:

       <com.google.android.material.textfield.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:textColorHint="@color/white"
                app:passwordToggleEnabled="true"
                app:passwordToggleTint="@color/white">

                <EditText
                    android:id="@+id/et_password"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:backgroundTint="@color/white"
                    android:hint="@string/password"
                    android:imeOptions="actionDone"
                    android:inputType="textPassword"
                    android:maxLength="40"
                    android:maxLines="1"
                    android:textColor="@color/white"
                    android:textColorHint="@color/app_green_color" />

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

@GabrieleMariotti you can see image in this link https://i.stack.imgur.com/Vc21z.jpg I hope you will understand my question. — Saad Khan, Feb 03 '20 at 14:38
@SaadKhan Use the version 1.1.0 or later. The error icon appears and the password toggle icon disappears. — Gabriele Mariotti, Feb 03 '20 at 14:47
@GabrieleMariotti using 1.1.0-beta01. but unable to solve this. — Saad Khan, Feb 03 '20 at 15:01
Use the com.google.android.material.textfield.TextInputEditText instead of EditText — Gabriele Mariotti, Feb 03 '20 at 15:12
@GabrieleMariotti using `com.google.android.material:material:1.4.0` nothing has change. The error icon still gets overlapped by password toggle. — Bitwise DEVS, Jul 18 '21 at 17:31
@BitwiseDEVS try this one. https://stackoverflow.com/a/60095321/10097307 — Saad Khan, Jul 21 '21 at 17:40

score 9 · Answer 1 · answered Jul 21 '21 at 13:20

9

I had the same problem. I'm using TextInputLayout and

implementation 'com.google.android.material:material:1.2.1'

Any of the answers above didn't help me. This is the correct way to do it:

<com.google.android.material.textfield.TextInputLayout
 ...
 app:errorIconDrawable="@null">

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

answered Jul 21 '21 at 13:20

Ozzini

145
1
7

This is the answer which worked for me. – Klem Lloyd Mwenya Dec 26 '22 at 20:14

score 7 · Accepted Answer · answered Feb 03 '20 at 16:50

Use the TextInputEditText instead of the EditText.

  <com.google.android.material.textfield.TextInputLayout
       app:endIconMode="password_toggle"
       app:endIconTint="@color/white"
       ...>

         <com.google.android.material.textfield.TextInputEditText
           android:inputType="textPassword"
           ../>

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

Also (but it is not related to the issue) the attributes app:passwordToggleEnabled="true" and app:passwordToggleTint="@color/white" are now deprecated. Use app:endIconMode and app:endIconTint.

score 3 · Answer 3 · answered Jan 11 '21 at 12:23

3

You should set the errorIconDrawable to null when you set the text error to something, so it won't override the toggle password icon.

Like this:

if (hasError) {
    textInputLayout.error = "Error text"
    textInputLayout.errorIconDrawable = null
}

answered Jan 11 '21 at 12:23

Pedro Sequeira

311
3
4

This worked for me. Thank you! – dazza5000 Dec 03 '21 at 01:13

score 0 · Answer 4 · answered Sep 29 '20 at 04:24

Best way to do it. Assign id to the textinputlayout and setError to textinputlayout, not edittext. Like:

<android.support.design.widget.TextInputLayout
  android:id="@+id/tilSignUpPassword"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_marginTop="5dp"
  app:passwordToggleEnabled="true"
  app:hintEnabled="false">

  <EditText
    android:id="@+id/etSignUpPassword"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Password"
    android:textColorHint="#a3a1a1"
    android:inputType="textPassword"
    android:drawableStart="@drawable/ic_password"
    android:background="@drawable/edittext_bg"
    android:layout_marginTop="3dp"
    android:drawablePadding="20dp"
    android:padding="10dp"
    android:layout_weight="0.09"/>

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

In Class:

 //your condition
 .....
 tilSignUpPassword.setError("Message")
 .....

Don't forget to setError(null) after your condition match.

https://stackoverflow.com/a/60095321/10097307

password toggle icon textinputlayout override error icon

4 Answers4