'Show or Hide text using password toggle
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?
Solution 1:[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>
Solution 2:[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"
Solution 3:[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>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Dr.jacky |
Solution 2 | Josh Lea Acquah |
Solution 3 | Dr.jacky |