how to invert password eye icon?

Question

the above eye icon in the edit text showing in reverse order when typing password, the password eye icon is blind when the password is invisible. how to invert it

thanks,

<android.support.design.widget.TextInputLayout
android:id="@+id/layout_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:passwordToggleEnabled="true"
app:passwordToggleTint="#000000">

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

Answer 1

With the Material Components starting from 1.2.0-beta01 it is the default behavior:

With the previous releases you can do:

<com.google.android.material.textfield.TextInputLayout
    app:endIconDrawable="@drawable/custom_password_eye"
    ..>

where custom_password_eye.xml is :

<animated-selector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:ignore="NewApi">

    <item
        android:id="@+id/visible"
        android:drawable="@drawable/design_ic_visibility_off"
        android:state_checked="true"/>

    <item
        android:id="@+id/masked"
        android:drawable="@drawable/design_ic_visibility"/>

    <transition
        android:drawable="@drawable/avd_hide_password"
        android:fromId="@id/masked"
        android:toId="@id/visible"/>

    <transition
        android:drawable="@drawable/avd_show_password"
        android:fromId="@id/visible"
        android:toId="@id/masked"/>

</animated-selector>

Answer 2

Late Answer.
Probably, google decided to indicate state button instead of action button
So if you want action button, you can customize icon drawable just using xml layout, no need to change it programmatically.
Add this to TextInputLayout:

app:passwordToggleDrawable="@drawable/eye_password"

or add this if you use material:1.1.0 or above

app:endIconDrawable="@drawable/eye_password"

then create new drawable for eye_password :

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

drawable for ic_eye_open :

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M12,4.5C7,4.5 2.73,7.61 1,12c1.73,4.39 6,7.5 11,7.5s9.27,-3.11 11,-7.5c-1.73,-4.39 -6,-7.5 -11,-7.5zM12,17c-2.76,0 -5,-2.24 -5,-5s2.24,-5 5,-5 5,2.24 5,5 -2.24,5 -5,5zM12,9c-1.66,0 -3,1.34 -3,3s1.34,3 3,3 3,-1.34 3,-3 -1.34,-3 -3,-3z"/>
</vector>

drawable for ic_eye_close :

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M12,7c2.76,0 5,2.24 5,5 0,0.65 -0.13,1.26 -0.36,1.83l2.92,2.92c1.51,-1.26 2.7,-2.89 3.43,-4.75 -1.73,-4.39 -6,-7.5 -11,-7.5 -1.4,0 -2.74,0.25 -3.98,0.7l2.16,2.16C10.74,7.13 11.35,7 12,7zM2,4.27l2.28,2.28 0.46,0.46C3.08,8.3 1.78,10.02 1,12c1.73,4.39 6,7.5 11,7.5 1.55,0 3.03,-0.3 4.38,-0.84l0.42,0.42L19.73,22 21,20.73 3.27,3 2,4.27zM7.53,9.8l1.55,1.55c-0.05,0.21 -0.08,0.43 -0.08,0.65 0,1.66 1.34,3 3,3 0.22,0 0.44,-0.03 0.65,-0.08l1.55,1.55c-0.67,0.33 -1.41,0.53 -2.2,0.53 -2.76,0 -5,-2.24 -5,-5 0,-0.79 0.2,-1.53 0.53,-2.2zM11.84,9.02l3.15,3.15 0.02,-0.16c0,-1.66 -1.34,-3 -3,-3l-0.17,0.01z"/>
</vector>