How to switch between hide and view password

Question

Is there a clever way to let the user switch between hide and view password in an android EditText? A number of PC based apps let the user do this.

Solution 1

You can dynamically change the attributes of a TextView. If you would set the XML Atrribute android:password to true the view would show dots if you set it to false the text is shown.

With the method setTransformationMethod you should be able to change this attributes from code. (Disclaimer: I have not tested if the method still works after the view is displayed. If you encounter problems with that leave me a comment for me to know.)

The full sample code would be

yourTextView.setTransformationMethod(new PasswordTransformationMethod());

to hide the password. To show the password you could set one of the existing transformation methods or implement an empty TransformationMethod that does nothing with the input text.

yourTextView.setTransformationMethod(new DoNothingTransformation());

Solution 2

It is really easy to achieve since the Support Library v24.2.0.

What you need to do is just:

1. Add the design library to your dependecies

   dependencies {
        compile "com.android.support:design:24.2.0"
   }
   

2. Use TextInputEditText in conjunction with TextInputLayout

   <android.support.design.widget.TextInputLayout
       android:id="@+id/etPasswordLayout"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       app:passwordToggleEnabled="true"
       android:layout_marginBottom="@dimen/login_spacing_bottom">
   
       <android.support.design.widget.TextInputEditText
           android:id="@+id/etPassword"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:hint="@string/fragment_login_password_hint"
           android:inputType="textPassword"/>
   </android.support.design.widget.TextInputLayout>
   

The passwordToggleEnabled attribute will do the job!

3. In your root layout don't forget to add xmlns:app="http://schemas.android.com/apk/res-auto"

4. You can customize your password toggle by using:

app:passwordToggleDrawable - Drawable to use as the password input visibility toggle icon.
app:passwordToggleTint - Icon to use for the password input visibility toggle.
app:passwordToggleTintMode - Blending mode used to apply the background tint.

More details in TextInputLayout documentation.

For AndroidX

• Replace android.support.design.widget.TextInputLayout with com.google.android.material.textfield.TextInputLayout

• Replace android.support.design.widget.TextInputEditText with com.google.android.material.textfield.TextInputEditText

Solution 3

To show the dots instead of the password set the PasswordTransformationMethod:

yourEditText.setTransformationMethod(new PasswordTransformationMethod());

of course you can set this by default in your edittext element in the xml layout with

android:password

To re-show the readable password, just pass null as transformation method:

yourEditText.setTransformationMethod(null);

Solution 4

To show:

editText.setInputType(InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);

To hide:

editText.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);

After each of these the cursor is reset, so:

editText.setSelection(editText.length());

Solution 5

You can use app:passwordToggleEnabled="true"

here is example given below

<android.support.design.widget.TextInputLayout
        android:id="@+id/password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:passwordToggleEnabled="true"
        android:textColorHint="@color/colorhint"
        android:textColor="@color/colortext">

View more solutions

Comments

[Wilka]

android:password is deprecated now, and you should use android:inputType instead.

[Mostafa]

You can also make your users happy by saving cursor position before setting transformation method and restoring after it. Use editText.getSelectionStart() and editText.getSelectionEnd() for saving cursor position and editText.setSelection(start, end) for restoring it.

[Johann]

@Wilka: android:inputType does NOT let you switch back and forth between the two states at run-time. It only allows you to switch once and once you change it, you cannot change it back. And no, the setTransformationMethod is NOT deprecated.

[Matt Quigley]

To show the password, you don't need to make any new classes. Just call setTransformationMethod(null).

[sujith s]

@Janusz , use of the following will give gud solution. setTransformationMethod(PasswordTransformationMethod.getInst‌​ance()); and setTransformationMethod(HideReturnsTransformationMethod.getI‌​nstance());

[Narendra Singh]

@Janusz but how to get show / hide keys in keyboard?

[tsiro]

when calling setTransformationMethod on an EditeText the onTextChanged callback of the EditText is being called...is it possible not this being happened?

[guisantogui]

Do you have any idea how to use setError with this component, once the error is flagged the show/hide icon become invisible

[Sergio]

Correct. The "setTransformationMethod() is the key. All you need is switch in your listener: etPassword.setTransformationMethod(null) / etPassword.setTransformationMethod(new PasswordTransformationMethod()). By default, set in your xml EditView "android:inputType="textPassword""

[MiguelHincapieC]

In version 25.1.0 I have a weird behavior: it shows the password toggle once but if you press it, it will disappear o_O'

[mmBs]

Yeah, there are also some quirks with android:text attribute on TextInputEditText. You can always raise an issue on Google Issues Tracker for Android

[Samad]

is there any way to move the icon to the left side?

[mmBs]

@Delta7 There are some ways and workarounds. Please, ask the question on SO, paste a link here and I will try to help you.

[Gunavant Patel]

Not need to set text again only call firstEditText.invalidate();

[Ruslan Berozov]

Today it must be a preferred to use answer

[Sadda Hussain]

That increases the height of the view in my case. Is there any way to remove padding from toggle drawable.

[FabioR]

The only way that actually worked for me programmatically, I needed my TextInputEditText to be numbers only and to also allow password visibility to be toggled on and off (when the person clicks the eye icon). These are the lines that helped me achieve that: textnputLayout.isPasswordVisibilityToggleEnabled = true textInputEditText.transformationMethod = PasswordTransformationMethod.getInstance() textInputEditText.inputType = InputType.TYPE_CLASS_NUMBER

[Nicolas]

This is deprecated in material components. Use app:endIconMode="password_toggle".

[Josh Sutterfield]

Thanks. However, in my build the show/hide graphics are oddly reversed from your screenshot - it shows the crossed-out-eye when password is hidden - I guess someone decided buttons should show current state instead of action (or goal state).

[Rahmat Ihsan]

@JoshSutterfield agree. so if we want action button, we have to reverse it manually using app:passwordToggleDrawable (deprecated) or app:endIconDrawable then use custom drawable like <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> I think google should fix this behavior. Good discussion

[FluffyKitten]

Welcome to Stack Overflow. Code-only answers are discouraged on Stack Overflow because they don't explain how it solves the problem. Please edit your answer to explain how this answers the question and and how it improves on the many existing upvoted answers answers the question already has, so that it is useful to the OP as well as other users with similar issues.