Password toggle icon is inverted in material design in Android Studio

Issue

When I run this code, the password visibility toggle icon is inverted. It shows ‘open eye’ icon if password is hidden and vice versa.

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/id_txtInpLayout_pass"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:passwordToggleEnabled="true"
        android:layout_marginTop="10dp"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/id_txtInpEditTxt_pass"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="@string/hint_pass"
            android:inputType="textPassword"
            android:ems="14"/>

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

I did not write any code in MainActivity.java.

Solution

app:passwordToggleEnabled has become deprecated. For a good use you should now use the endIconMode in your TextInputLayout like this:

app:endIconMode="password_toggle"

Then in your TextInputEditText use:

android:inputType="textPassword"

And that’s it. Here is the full example XML code:

<com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:id="@+id/editTextLayoutPassword"
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:hint="Password"
        app:endIconMode="password_toggle">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/editTextPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPassword"
            android:maxLength="20" />
    </com.google.android.material.textfield.TextInputLayout>

EDIT: It seems it may still be inverted, so here is a final solution.
Create a new Drawable Resource File, call it custom_eye and insert this code:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_opened_eye"
    android:state_checked="true"/>
<item android:drawable="@drawable/ic_closed_eye"/>
</selector>

Then just download two SVG icons (you can choose here your icons).

Lastly, just import them as "Vector Assets" in drawable folder and rename one ic_opened_eye, the other ic_closed_eye here you are, you can change your icons for password visibility.

Then just use app:endIconDrawable="@drawable/custom_eye" in your TextInputLayout.

If you still don’t like it, just invert the two icons in the XML file whenever you want.

Answered By – Stefano Leone

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published