Password toggle icon is inverted in material design in Android Studio

Question

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.

Answer 1

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.

Answer 2

I ran into a problem. Finally, I was able to solve the problem using the given method below. here, is the password field in XML:

<com.google.android.material.textfield.TextInputLayout
    app:endIconMode="password_toggle"
    app:endIconDrawable="@drawable/custom_password_toggle"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="0dp"
    app:boxStrokeWidth="0dp"
    app:boxStrokeWidthFocused="0dp"
    app:hintEnabled="false">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/password_input"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_marginBottom="15dp"
        android:fontFamily="@font/dm_sans"
        android:hint="*******"
        android:background="@drawable/rectangle_8"
        android:inputType="textPassword"
        android:padding="@dimen/_9sdp"
        android:textAppearance="@style/TextAppearance.Material3.TitleSmall"
        android:textColor="@color/black"
        android:textSize="@dimen/_13sdp" />

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

Here, app:boxStrokeWidth="0dp" , app:boxStrokeWidthFocused="0dp" use for remove borderline in editTextView as like bellow img1 and app:hintEnabled="false" it's for hide hint Text.

Now we should Create a Drawable Resource File, call it custom_password_toggle 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_show_eye"
        android:state_checked="true"/>
    <item android:drawable="@drawable/ic_hide_eye"/>
</selector>

[note: use SVG for accurate output]

drawable for ic_show_eye:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:width="24dp"
    android:height="20dp"
    android:viewportWidth="700"
    android:viewportHeight="572">
  <path
      android:fillColor="#3A4350"
      android:pathData="m350,443.33c-60.03,0 -121.23,-28.08 -178.16,-74.05 -41.27,-33.33 -78.51,-75.96 -78.51,-89.29s37.24,-55.95 78.51,-89.29c56.92,-45.97 118.13,-74.05 178.16,-74.05s121.23,28.08 178.16,74.05c41.27,33.33 78.51,75.96 78.51,89.29s-37.24,55.95 -78.51,89.29c-56.92,45.97 -118.13,74.05 -178.16,74.05zM350,420c53.79,0 110.35,-25.94 163.5,-68.87 19.98,-16.14 38.24,-33.8 52.56,-50.19 5.89,-6.75 10.77,-12.9 14.11,-17.73 1.84,-2.66 3.16,-5.15 3.16,-3.22s-1.32,-0.56 -3.16,-3.22c-3.34,-4.83 -8.22,-10.98 -14.11,-17.73 -14.32,-16.39 -32.58,-34.05 -52.56,-50.19 -53.15,-42.93 -109.7,-68.87 -163.5,-68.87s-110.35,25.94 -163.5,68.87c-19.98,16.14 -38.24,33.8 -52.56,50.19 -5.89,6.75 -10.77,12.9 -14.11,17.73 -1.84,2.66 -3.16,5.15 -3.16,3.22s1.32,0.56 3.16,3.22c3.34,4.83 8.22,10.98 14.11,17.73 14.32,16.39 32.58,34.05 52.56,50.19 53.15,42.93 109.7,68.87 163.5,68.87zM350,373.33c-51.55,0 -93.33,-41.78 -93.33,-93.33s41.78,-93.33 93.33,-93.33 93.33,41.78 93.33,93.33 -41.78,93.33 -93.33,93.33zM350,350c38.66,0 70,-31.34 70,-70s-31.34,-70 -70,-70 -70,31.34 -70,70 31.34,70 70,70z"
      tools:ignore="VectorPath" />
</vector>

drawable for ic_hide_eye:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:width="24dp"
    android:height="20dp"
    android:viewportWidth="24"
    android:viewportHeight="20">
  <path
      android:pathData="M19.539,13.888C19.819,14.169 20.271,14.182 20.556,13.907C21.443,13.052 22.171,12.183 22.724,11.447C23.588,10.3 23.588,8.762 22.725,7.614C20.891,5.177 17.154,1.281 12,1.281C10.94,1.285 9.888,1.448 8.881,1.764C8.359,1.928 8.233,2.581 8.62,2.969C8.833,3.183 9.151,3.25 9.44,3.163C10.269,2.912 11.132,2.783 12,2.781C15.18,2.781 17.819,4.533 19.752,6.467C20.56,7.279 21.295,8.16 21.949,9.099C22.13,9.359 22.13,9.703 21.949,9.963C21.447,10.683 20.705,11.643 19.752,12.595C19.689,12.658 19.625,12.721 19.561,12.784C19.252,13.084 19.235,13.583 19.539,13.888Z"
      android:fillColor="#4f4f4f"/>
  <path
      android:pathData="M16.009,10.359C16.444,10.794 17.174,10.618 17.23,10.005C17.28,9.463 17.245,8.913 17.124,8.377C16.906,7.407 16.417,6.518 15.714,5.815C15.011,5.112 14.123,4.623 13.153,4.405C12.617,4.285 12.068,4.25 11.526,4.299C10.912,4.355 10.736,5.086 11.172,5.522C11.359,5.709 11.623,5.791 11.887,5.783C12.327,5.769 12.766,5.833 13.186,5.973C13.738,6.157 14.24,6.467 14.652,6.879C15.064,7.291 15.374,7.793 15.558,8.345C15.698,8.765 15.762,9.205 15.749,9.645C15.741,9.908 15.822,10.172 16.009,10.359ZM12.113,13.28C12.377,13.272 12.641,13.354 12.828,13.54C13.263,13.975 13.087,14.705 12.474,14.761C11.932,14.811 11.382,14.776 10.846,14.655C9.876,14.438 8.987,13.948 8.284,13.245C7.581,12.542 7.092,11.654 6.874,10.684C6.754,10.148 6.719,9.599 6.768,9.057C6.824,8.444 7.555,8.268 7.991,8.703C8.177,8.89 8.259,9.154 8.251,9.418C8.238,9.858 8.302,10.297 8.442,10.717C8.626,11.269 8.936,11.771 9.348,12.183C9.76,12.595 10.262,12.905 10.814,13.089C11.234,13.229 11.674,13.293 12.113,13.28Z"
      android:fillColor="#4f4f4f"
      tools:ignore="VectorPath" />
  <path
      android:pathData="M5.025,5.736C4.755,5.976 4.496,6.219 4.248,6.466C3.44,7.279 2.705,8.16 2.05,9.099C1.87,9.358 1.873,9.701 2.05,9.963V9.963C2.553,10.683 3.296,11.643 4.248,12.595C6.181,14.529 8.822,16.281 12,16.281C12.898,16.281 13.752,16.142 14.56,15.897C14.849,15.809 15.166,15.878 15.38,16.092V16.092C15.767,16.48 15.641,17.134 15.118,17.298C14.11,17.614 13.06,17.777 12,17.781C6.846,17.781 3.109,13.885 1.275,11.448C0.412,10.3 0.412,8.762 1.275,7.615C1.825,6.883 2.547,6.02 3.426,5.171C3.721,4.886 4.188,4.901 4.477,5.19L5.022,5.736C5.023,5.737 5.024,5.737 5.025,5.736V5.736ZM21,18.531C20.707,18.824 20.231,18.824 19.938,18.531L3,1.593C2.707,1.3 2.707,0.824 3,0.531V0.531C3.293,0.238 3.769,0.238 4.062,0.531L21,17.469C21.293,17.762 21.293,18.238 21,18.531V18.531Z"
      android:fillColor="#4f4f4f"/>
</vector>

So, my final output is bellow image: