Show/hide password in a edit text view (password type)

Introduction 

Sometime, in your Android application activity, you want to have a password field that can be show/hide its content. So, with this code snippet, you can achieve quickly and correctly.

Build a simple demo

In this simple demo, there is a password text field. Normally, when user enter text in this field, all characters will be showed like this : *****. To achieve our purpose, I will add a toogle-checkbox. By default, this checkbox is un-checked status. So, the password field be showed in its original format. When user tap on checkbox, the password will be showed it content in readable format. Tap again on checkbox, the password field go back its original format ( only show * characters).





Using the code

Activity_main:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="22dp"
        android:layout_marginTop="128dp"
        android:text="Password" />
    <EditText
        android:id="@+id/editText1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/textView1"
        android:layout_alignBottom="@+id/textView1"
        android:layout_alignLeft="@+id/checkBox1"
        android:layout_marginLeft="17dp"
        android:ems="10"
        android:inputType="textPassword" >
        <requestFocus />
    </EditText>
    <CheckBox
        android:id="@+id/checkBox1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/editText1"
        android:layout_marginRight="30dp"
        android:layout_marginTop="24dp"
        android:text="Show Password" />
</RelativeLayout>


MainActivity.java:
package com.example.password;

import android.os.Bundle;
import android.app.Activity;
import android.text.method.HideReturnsTransformationMethod;
import android.text.method.PasswordTransformationMethod;
import android.view.Menu;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.EditText;

public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final EditText ed=(EditText)findViewById(R.id.editText1);
CheckBox c=(CheckBox)findViewById(R.id.checkBox1);
c.setOnCheckedChangeListener(new OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
// TODO Auto-generated method stub
if(!isChecked)
{
ed.setTransformationMethod(PasswordTransformationMethod.getInstance());
}
else
{
ed.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
}
}
});
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

}


Previous
Next Post »

2 comments

Write comments
Unknown
AUTHOR
February 20, 2016 at 4:06 PM delete

Simple explanation......satisfied.Thnks

Reply
avatar