How to switch between hide and view password

Viewed 280184

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

I had the same issue and it is very easy to implement.

All you have to do is wrap your EditText field in a (com.google.android.material.textfield.TextInputLayout) and in that add ( app:passwordToggleEnabled="true" ).

This will show the eye in the EditText field and when you click on it the password will appear and disappear when clicked again.

<com.google.android.material.textfield.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:textColorHint="#B9B8B8"
                app:passwordToggleEnabled="true">

                <EditText
                    android:id="@+id/register_password"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="24dp"
                    android:layout_marginRight="44dp"
                    android:backgroundTint="#BEBEBE"
                    android:hint="Password"
                    android:inputType="textPassword"
                    android:padding="16dp"
                    android:textSize="18sp" />
            </com.google.android.material.textfield.TextInputLayout>
private boolean isPasswordVisible;

private TextInputEditText firstEditText;

...

firstEditText = findViewById(R.id.et_first);

...

    private void togglePassVisability() {
    if (isPasswordVisible) {
        String pass = firstEditText.getText().toString();
        firstEditText.setTransformationMethod(PasswordTransformationMethod.getInstance());
        firstEditText.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
        firstEditText.setText(pass);
        firstEditText.setSelection(pass.length());           
    } else {
        String pass = firstEditText.getText().toString();
        firstEditText.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
        firstEditText.setInputType(InputType.TYPE_CLASS_TEXT);
        firstEditText.setText(pass);
        firstEditText.setSelection(pass.length());
    }
    isPasswordVisible= !isPasswordVisible;
}

At first this is the screen loaded with an image vector asset visibility enter image description here

on click it will change to this image visibility off enter image description here

code for above password switch(xml code)

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/laypass"
    android:layout_width="330dp"
    android:layout_height="50dp"
    android:layout_marginTop="24dp"
    app:layout_constraintEnd_toEndOf="@+id/editText3"
    app:layout_constraintStart_toStartOf="@+id/editText3"
    app:layout_constraintTop_toBottomOf="@+id/editText3">

    <EditText
        android:id="@+id/edit_password"
        style="@style/EditTextTheme"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/round"
        android:drawableLeft="@drawable/ic_password"
        android:drawablePadding="10dp"
        android:ems="10"
        android:hint="Password"
        android:inputType="textPassword"
        android:paddingLeft="10dp"
        android:paddingRight="15dp"
        android:textColor="@color/cyan92a6"
        android:textColorHint="@color/cyan92a6"
        android:textCursorDrawable="@null"
        android:textSize="18sp"
        />

    <ImageView
        android:id="@+id/show_pass_btn"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginEnd="8dp"
        android:alpha=".5"
        android:onClick="ShowHidePass"
        android:padding="5dp"
        android:src="@drawable/ic_visibility"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@+id/laypass"
        app:layout_constraintTop_toTopOf="@+id/edit_password" /> 
 </androidx.constraintlayout.widget.ConstraintLayout>

Java code for button operation

public void ShowHidePass(View view) {

    if(view.getId()==R.id.show_pass_btn){
        if(edit_password.getTransformationMethod().equals(PasswordTransformationMethod.getInstance())){
            ((ImageView)(view)).setImageResource(R.drawable.ic_visibility_off);
            //Show Password
            edit_password.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
        }
        else{
            ((ImageView)(view)).setImageResource(R.drawable.ic_visibility);
            //Hide Password
            edit_password.setTransformationMethod(PasswordTransformationMethod.getInstance());
        }
    }
}

In very simple form:

private fun updatePasswordVisibility(editText: AppCompatEditText) {
        if (editText.transformationMethod is PasswordTransformationMethod) {
            editText.transformationMethod = null
        } else {
            editText.transformationMethod = PasswordTransformationMethod()
        }
        editText.setSelection(editText.length())
    }

Hope it helps.

Try this:

First define a flag as global like this:

private boolean isShowPassword = false;

And set listener to handle tap on show and hide password button:

imgPassword.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (isShowPassword) {
                    etPassword.setTransformationMethod(new PasswordTransformationMethod());
                    imgPassword.setImageDrawable(getResources().getDrawable(R.drawable.ic_eye_hide));
                    isShowPassword = false;
                }else{
                    etPassword.setTransformationMethod(null);
                    imgPassword.setImageDrawable(getResources().getDrawable(R.drawable.ic_eye_show));
                    isShowPassword = true;
                }
            }
        });

show and hide password Edit_Text with check Box

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <EditText
        android:inputType="textPassword"
        android:id="@+id/edtPass"
        android:textSize="20dp"
        android:hint="password"
        android:padding="20dp"
        android:background="#efeaea"
        android:layout_width="match_parent"
        android:layout_margin="20dp"
        android:layout_height="wrap_content" />

    <CheckBox
        android:background="#ff4"
        android:layout_centerInParent="true"
        android:textSize="25dp"
        android:text="show password"
        android:layout_below="@id/edtPass"
        android:id="@+id/showPassword"
        android:layout_marginTop="20dp"
        android:layout_width="wrap_content"
        android:gravity="top|right"
        android:layout_height="wrap_content" />

</RelativeLayout>

java code

package com.example.root.sql2;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.AppCompatCheckBox;
import android.support.v7.widget.Toolbar;
import android.text.method.HideReturnsTransformationMethod;
import android.text.method.PasswordTransformationMethod;
import android.view.View;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.EditText;

public class password extends AppCompatActivity {


    EditText password;
    CheckBox show_hide_password;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.hide);
        findViewById();
        show_hide_pass();



    }//end onCreate



    public void show_hide_pass(){
        show_hide_password.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                if (!b){
                    // hide password
                    password.setTransformationMethod(PasswordTransformationMethod.getInstance());

                }else{
                    // show password
                    password.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
                }
            }
        });
    } // end show_hide_pass




    public void findViewById(){ //  find ids ui and
        password = (EditText) findViewById(R.id.edtPass);
        show_hide_password = (CheckBox) findViewById(R.id.showPassword);
    }//end findViewById



}// end class

According to this source, if you have migrated your project to AndroidX, then you can replace

compile "com.android.support:design:24.2.0"

with

implementation "com.google.android.material:material:1.0.0"

Then all you have to do is to put the code below to your layout file:

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:passwordToggleEnabled="true"
    android:hint="@string/hint_text">

  <com.google.android.material.textfield.TextInputEditText
      android:layout_width="match_parent"
      android:layout_height="wrap_content"/>

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

More information about material TextInputLayout can be found here.

To this source, it is recommended to migrate to AndroidX from Android Support Library:

AndroidX is the open-source project that the Android team uses to develop, test, package, version and release libraries within Jetpack.

AndroidX is a major improvement to the original Android Support Library. Like the Support Library, AndroidX ships separately from the Android OS and provides backwards-compatibility across Android releases. AndroidX fully replaces the Support Library by providing feature parity and new libraries. In addition AndroidX includes the following features:

All packages in AndroidX live in a consistent namespace starting with the string androidx. The Support Library packages have been mapped into corresponding androidx.* packages. For a full mapping of all the old classes and build artifacts to the new ones, see the Package Refactoring page.

Unlike the Support Library, AndroidX packages are separately maintained and updated. The androidx packages use strict Semantic Versioning starting with version 1.0.0. You can update AndroidX libraries in your project independently.

All new Support Library development will occur in the AndroidX library. This includes maintenance of the original Support Library artifacts and introduction of new Jetpack components.

A good solution. Set up a button, then use this code:

public void showPassword(View v)
{

    TextView showHideBtnText = (TextView) findViewById(R.id.textView1);

    if(showHideBtnText.getText().toString().equals("Show Password")){
        password.setTransformationMethod(null);
        showHideBtnText.setText("Hide");
    } else{
        password.setTransformationMethod(new PasswordTransformationMethod());
        showHideBtnText.setText("Show Password");
    }


}

1 - Make a selector file "show_password_selector.xml"

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/pwd_hide"
          android:state_selected="true"/>
    <item android:drawable="@drawable/pwd_show"
          android:state_selected="false" />
 </selector>

2 - Aet "show_password_selector" file into imageview.

<ImageView
    android:id="@+id/iv_pwd"
    android:layout_width="@dimen/_35sdp"
    android:layout_height="@dimen/_25sdp"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:layout_marginRight="@dimen/_15sdp"
    android:src="@drawable/show_password_selector" />

3 - Put below code in java file.

iv_new_pwd.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        if (iv_new_pwd.isSelected()) {
            iv_new_pwd.setSelected(false);
            Log.d("mytag", "in case 1");
            edt_new_pwd.setInputType(InputType.TYPE_CLASS_TEXT);
        } else {
            Log.d("mytag", "in case 1");
            iv_new_pwd.setSelected(true);
            edt_new_pwd.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
        }
    }
});

You have to ask if the current text is already shown with dots, the function PasswordTransformationMethod.getInstance() allow you to do that.

This is my funtion in kotlin:

        fun hideAndShowPassword(editText: EditText, indicator: ImageView) {

        if (editText.transformationMethod == PasswordTransformationMethod.getInstance()) {
            editText.transformationMethod = HideReturnsTransformationMethod.getInstance()
            indicator.setImageDrawable(
                ContextCompat.getDrawable(
                    editText.context,
                    R.drawable.eye
                )
            )
            indicator.imageTintList =
                ContextCompat.getColorStateList(editText.context, R.color.colorTintIcons)
        } else {
            editText.transformationMethod = PasswordTransformationMethod.getInstance()
            indicator.setImageDrawable(
                ContextCompat.getDrawable(
                    editText.context,
                    R.drawable.eye_off
                )
            )
            indicator.imageTintList =
                ContextCompat.getColorStateList(editText.context, R.color.colorTintIcons)
        }

        editText.setSelection(editText.text.length)
    }

I used a OnClickListener() which is associated to the button that I want to use as toogle.

private EditText email_et, contraseña_et;
protected void onCreate(Bundle savedInstanceState) {
....
contraseña_et = (EditText) findViewById(R.id.contraseña_et);
....
vercontra_btn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            int inputType = contraseña_et.getInputType();
            if (inputType == 129){
                contraseña_et.setInputType(1);
            } else {
                contraseña_et.setInputType(129);
            }
            contraseña_et.setSelection(contraseña_et.getText().length());
        }
    });

Reading docs, the int value seems to be different so I debugged to find the correct values, it's working awesome and is a little bit easier this way.

[Contraseña is password in spanish, btw]

My Kotlin extension . write once use everywhere

fun EditText.tooglePassWord() {
this.tag = !((this.tag ?: false) as Boolean)
this.inputType = if (this.tag as Boolean)
    InputType.TYPE_TEXT_VARIATION_PASSWORD
else
    (InputType.TYPE_CLASS_TEXT or InputType.TYPE_TEXT_VARIATION_PASSWORD)

this.setSelection(this.length()) }

You can keep this method in any file and use it everywhere use it like this

ivShowPassword.click { etPassword.tooglePassWord() }

where ivShowPassword is clicked imageview (eye) and etPassword is Editext

Add this method:

fun EditText.revertTransformation() {
    transformationMethod = when(transformationMethod) {
        is PasswordTransformationMethod -> SingleLineTransformationMethod.getInstance()
        else -> PasswordTransformationMethod.getInstance()
    }
}

Call it will switch between input type state (you may change the Single-Line transformation to your favorite). Usage example:

editText.revertTransformation()

Try this:

passwordEditText.setInputType(1);

Or

passwordEditText.setInputType(InputType.TYPE_CLASS_TEXT);

Use the below code

    val hidePasswordMethod = PasswordTransformationMethod()
    showOrHidePasswordButton.setOnClickListener {
        passwordEditText.apply {
            transformationMethod =
                if (transformationMethod is PasswordTransformationMethod) 
                   null //shows password
               else 
                   hidePasswordMethod //hides password
        }
    }

and make sure you add this to your password edittext in layout

    android:inputType="textPassword"

If you want a simple solution you can use this extension of Android's EditText go to this link for more info: https://github.com/scottyab/showhidepasswordedittext

Add this to your build.gradle: implementation 'com.github.scottyab:showhidepasswordedittext:0.8'

Then change your EditText in your XML file.

From: <EditText

To: <com.scottyab.showhidepasswordedittext.ShowHidePasswordEditText

That's all.

Note: You can't see it while in XML Design, try to run it in your Emulator or Physical Device.

It seems that input_layout.isPasswordVisibilityToggleEnabled = true is deprecated. And in my case I did it that way in Kotlin:

input_edit_text.inputType = TYPE_CLASS_TEXT or TYPE_TEXT_VARIATION_PASSWORD
input_layout.endIconMode = END_ICON_PASSWORD_TOGGLE

Where input_edit_text is com.google.android.material.textfield.TextInputEditText and input_layout is com.google.android.material.textfield.TextInputLayout. Of course you should import these asl well:

import android.text.InputType.TYPE_CLASS_TEXT
import android.text.InputType.TYPE_TEXT_VARIATION_PASSWORD
import com.google.android.material.textfield.TextInputLayout.END_ICON_PASSWORD_TOGGLE

My may customize the icon with provided methods as these:

 input_layout.endIconDrawable = ...
 input_layout.setEndIconOnClickListener {  }
 input_layout.setEndIconOnLongClickListener(...)

Just create a checkbox in Xml file

and then simple write this function in java code

checkbox = findViewById(R.id.checkbox);
        checkbox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener(){
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked){

                if (isChecked) {
                    password.setTransformationMethod(null);
                }
                else{
                    password.setTransformationMethod(new PasswordTransformationMethod());
                }
            }

        });
Related