How to switch between hide and view password

by

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.

35 Answers
35

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!

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

  2. 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.

enter image description here

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

Leave a Comment