Show/hide password in a edit text view (password type).
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).
Hide the password
Show the password
Using the code
Main layout : main.xml
In this layout, I defined an EditText field (password type) and a checkbox field. When user clicks on this checkbox, it will show/hide the password content.
<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" >
<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="23dp"
android:layout_marginTop="86dp"
android:text="@string/hello_world"
tools:context=".MainActivity" />
<EditText
android:id="@+id/etPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/textView1"
android:layout_below="@+id/textView1"
android:layout_marginLeft="21dp"
android:layout_marginTop="14dp"
android:ems="10"
android:inputType="textPassword" >
<requestFocus />
</EditText>
<CheckBox
android:id="@+id/cbShowPwd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/etPassword"
android:layout_below="@+id/etPassword"
android:text="@string/show_pwd" />
</RelativeLayout>
Code of activity : MainActivity.java
package vn.com.enclaveit.phatbeo.android.demo;
import android.app.Activity;
import android.os.Bundle;
import android.text.method.HideReturnsTransformationMethod;
import android.text.method.PasswordTransformationMethod;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.EditText;
// @author : Phat (Phillip) H. VU <vuhongphat@hotmail.com>
public class MainActivity extends Activity {
EditText mEtPwd;
CheckBox mCbShowPwd;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// get the password EditText
mEtPwd = (EditText) findViewById(R.id.etPassword);
// get the show/hide password Checkbox
mCbShowPwd = (CheckBox) findViewById(R.id.cbShowPwd);
// add onCheckedListener on checkbox
// when user clicks on this checkbox, this is the handler.
mCbShowPwd.setOnCheckedChangeListener(new OnCheckedChangeListener() {
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
// checkbox status is changed from uncheck to checked.
if (!isChecked) {
// show password
mEtPwd.setTransformationMethod(PasswordTransformationMethod.getInstance());
} else {
// hide password
mEtPwd.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
}
}
});
}
}
History
First release on Dec 31, 2012.