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.

Answer 1

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 dependencies

    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

Answer 2

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());