5

enter image description here

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>
Chetan Joshi
  • 5,582
  • 4
  • 30
  • 43
Siddesh Kumar
  • 59
  • 1
  • 9

4 Answers4

3

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

enter image description here enter image description here

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>
Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
  • Is there a way to change the behavior in version 1.3.0-alpha01. I tried your way but it doesn't work. Currently, by default, visibility icon is shown when the password is masked and vice versa. – fakhruddin tahery Jun 28 '20 at 22:19
  • @fakhruddintahery if you want to invert on 1.3.0-alpha01 you have to invert the drawable in the item and transition. – Gabriele Mariotti Jun 29 '20 at 06:35
  • the issue is that the icon doesn't get displayed when I use custom_password_eye.xml. in app:endIconDrawable – fakhruddin tahery Jun 29 '20 at 11:10
  • remove `app:passwordToggleEnabled="true"` and add `app:endIconMode="password_toggle"` – Alfin Jan 04 '21 at 14:44
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>
Rahmat Ihsan
  • 196
  • 1
  • 6
1

you must take two drawable in and then Change drawable image dynamically on button click or any other event like below you may set drawable in EditText like below:

Drawable img = getContext().getResources().getDrawable( R.drawable.smiley );
editText.setCompoundDrawablesWithIntrinsicBounds( null, null, img, null);
Chetan Joshi
  • 5,582
  • 4
  • 30
  • 43
1
       <com.google.android.material.textfield.TextInputLayout              
           app:endIconDrawable="@drawable/password_toogle"
           app:endIconMode="password_toggle">

           <com.google.android.material.textfield.TextInputEditText
               android:id="@+id/inpPassword"
               android:ems="15"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:inputType="textPassword"
               android:textColor="#555555"
               android:textSize="14sp" />

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

---------- password_toogle ---------

      <selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/ic_eye_close"
    android:state_checked="false"/>
<item android:drawable="@drawable/ic_eye_open"/>

You can use propertyapp:passwordToggleEnabled="true" simply but it gives inverted icons for hiding and showing passwords

Prakash Reddy
  • 944
  • 10
  • 20