Show or Hide text using password toggle

Question

I am doing show or hide password using below code

pwdLayout.setEndIconMode(TextInputLayout.END_ICON_PASSWORD_TOGGLE);

I am able to achieve show or hide password. But eye icon with cross sign is showing password and without cross sign is hiding password. I need to reverse this logic how to do this?

Marquet

Can you provide the code that you hide the password? – Ransell

@L.Papadopoulos I use this one line given to enable password toggle. I didnt do any specific logic to show or hide password – Marquet

@Marquet Which version of material components are you using? – Graniela

Answer 1

Starting from the 1.2.0 this is the default behavior:

If you want to reverse the icon you can use something like:

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

with:

    <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"
            android:state_checked="true"/>
    
        <item
            android:id="@+id/masked"
            android:drawable="@drawable/design_ic_visibility_off"/>
    
        <transition
            android:drawable="@drawable/avd_show_password"
            android:fromId="@id/masked"
            android:toId="@id/visible"/>
    
        <transition
            android:drawable="@drawable/avd_hide_password"
            android:fromId="@id/visible"
            android:toId="@id/masked"/>
    
    </animated-selector>

Graniela

this show white icon in my cardview how i change the color – Garrulity

How are the last two? Cause avd_show_password says show but it has the "strike through" and the avd_hide_password says hide but it has not "strike through". and the IDE is showing both of the with the "strike through". – Mcchesney

How to add unfocused state to the selector? So, there'd be 2 more; show_eye_unfocused & hide_eye_unfocused. Cause state_checked, state_focused, state_pressed, state_selected didn't help. – Mcchesney

Answer 2

by default password should be hidden so design_ic_visibility_off should come first.

<!--design_ic_visibility_off.xml-->
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:ignore="NewApi"
    android:height="24dp"
    android:viewportHeight="24"
    android:viewportWidth="24"
    android:width="24dp">

    <path
        android:fillColor="@android:color/darker_gray"
        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>

<!--design_ic_visibility.xml-->
<?xml version="1.0" encoding="utf-8"?>
<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="@android:color/darker_gray"
            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>




   <!--my_custom_password_eye.xml-->
    <?xml version="1.0" encoding="utf-8"?
   `<animated-selector`
   `xmlns:android="http://schemas.android.com/apk/res/android">`
    
      <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_show_password"
        android:fromId="@+id/masked"
        android:toId="@id/visible"/>


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



<!-- your TextInputLayout -->
<com.google.android.material.textfield.TextInputLayout
    app:endIconDrawable="@drawable/my_custom_password_eye"

Byram

Answer 3

The simplest way to do this.

<com.google.android.material.textfield.TextInputLayout
            android:id="@+id/text_input_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:errorEnabled="true"
            app:passwordToggleEnabled="true">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Password"
                android:inputType="textPassword"
                android:backgroundTint="@color/colorPrimary"
                android:textColor="@color/colorPrimaryDark"/>

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

Cherubini