Android Studio : Password input and reveal password example

A password input field is common for an application that requires the user to log in. Such as login to banking app, social media app or simply a step of authentication before allowing certain users with the privilege to access the app.

For this tutorial, we will learn how to create a simple application that accepts user input such as username and password. We will learn how to get the password plaintext from the password input field and use it to process the login. Also, we will learn how to change a password field type to plain text input field type that will expose the password.

First, let's do the user interface layout. Create a new project and navigate to res/layout/activity_main_password.xml file and fill it up with:

 <?xml version="1.0" encoding="utf-8"?>
 <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context="com.example.sweetlogic.password.MainActivityPassword"
 tools:layout_editor_absoluteY="81dp"
 tools:layout_editor_absoluteX="0dp">

 <Button
 android:id="@+id/buttonRevealPassword"
 android:layout_width="300dp"
 android:layout_height="80dp"
 android:fontFamily="sans-serif-condensed"
 android:text="RevealPassword"
 android:textColor="?android:attr/textColorPrimary"
 android:textSize="18sp"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintLeft_toLeftOf="parent"
 app:layout_constraintRight_toRightOf="parent"
 app:layout_constraintTop_toTopOf="parent"
 tools:text="Reveal Password" />

 <TextView
 android:id="@+id/textUsername"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="username"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintLeft_toLeftOf="parent"
 app:layout_constraintTop_toTopOf="parent"
 app:layout_constraintVertical_bias="0.109"
 android:layout_marginBottom="0dp"
 android:layout_marginLeft="42dp" />

 <TextView
 android:id="@+id/textPassword"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="password"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintLeft_toLeftOf="parent"
 app:layout_constraintTop_toTopOf="parent"
 app:layout_constraintVertical_bias="0.311"
 android:layout_marginLeft="42dp" />

 <Button
 android:id="@+id/buttonClickToLogin"
 android:layout_width="300dp"
 android:layout_height="80dp"
 android:fontFamily="sans-serif-condensed"
 android:text="Login!"
 android:textColor="?android:attr/textColorPrimary"
 android:textSize="18sp"
 tools:text="Login"
 app:layout_constraintRight_toRightOf="parent"
 app:layout_constraintLeft_toLeftOf="parent"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintTop_toTopOf="parent"
 app:layout_constraintVertical_bias="0.686" />

 <EditText
 android:id="@+id/editUsername"
 android:layout_width="301dp"
 android:layout_height="45dp"
 android:ems="10"
 android:inputType="textPersonName"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintHorizontal_bias="0.506"
 app:layout_constraintLeft_toLeftOf="parent"
 app:layout_constraintRight_toRightOf="parent"
 app:layout_constraintTop_toTopOf="parent"
 app:layout_constraintVertical_bias="0.153" />

 <EditText
 android:id="@+id/editPassword"
 android:layout_width="301dp"
 android:layout_height="45dp"
 android:ems="10"
 android:inputType="textPassword"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintHorizontal_bias="0.506"
 app:layout_constraintLeft_toLeftOf="parent"
 app:layout_constraintRight_toRightOf="parent"
 app:layout_constraintTop_toTopOf="parent"
 app:layout_constraintVertical_bias="0.366" />

 </android.support.constraint.ConstraintLayout>

Second, navigate to MainActivityPassword.java file and fill it up with:

 package com.example.sweetlogic.password;

 import android.support.v7.app.AppCompatActivity;
 import android.os.Bundle;
 import android.text.InputType;
 import android.view.MotionEvent;
 import android.view.View;
 import android.widget.EditText;
 import android.widget.TextView;
 import android.widget.Button;
 import android.widget.Toast;

 public class MainActivityPassword extends AppCompatActivity {


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

 addListenerOnButtons();
 }

 public void addListenerOnButtons() {
 Button loginButton = (Button) findViewById(R.id.buttonClickToLogin);
 Button revealPasswordButton = (Button) findViewById(R.id.buttonRevealPassword);
 final EditText username = (EditText) findViewById(R.id.editUsername);
 final EditText password = (EditText) findViewById(R.id.editPassword);


 loginButton.setOnClickListener(new View.OnClickListener() {

 @Override
 public void onClick(View arg0) {
 Toast.makeText(MainActivityPassword.this, "Login with \nusername : " + username.getText() + "\npassword : " + password.getText(), Toast.LENGTH_SHORT).show();

 }
 });

 revealPasswordButton.setOnClickListener(new View.OnClickListener() {

 @Override
 public void onClick(View view) {

 // some how the constant value is not 128 as listed in
 // https://developer.android.com/reference/android/text/InputType.html
 //
 // But 129 from the toast message below!
 // why? 129 instead of 128?
 // see https://stackoverflow.com/questions/9951326/basic-android-code-edittexts-inputtype-why-was-the-bitwise-operator-used

 //Toast.makeText(MainActivityPassword.this, "input type : "+password.getInputType(), Toast.LENGTH_SHORT).show();

 if (password.getInputType() == 129) {
 password.setInputType(InputType.TYPE_TEXT_VARIATION_NORMAL); // reveal password in plainText
 } else if (password.getInputType() == InputType.TYPE_TEXT_VARIATION_NORMAL) {
 password.setInputType(129); // change back to password field
 }


 }
 });


 /*  NOTE: Use this portion if testing on real Android device.
 Remember to comment out setOnClickListener

 revealPasswordButton.setOnTouchListener(new View.OnTouchListener() {
 @Override
 public boolean onTouch(View view, MotionEvent event) {
 if (event.getAction() == MotionEvent.ACTION_BUTTON_PRESS) {
 password.setInputType(InputType.TYPE_TEXT_VARIATION_NORMAL); // reveal password in plainText
 } else if (event.getAction() == MotionEvent.ACTION_BUTTON_RELEASE) {
 password.setInputType(InputType.TYPE_TEXT_VARIATION_PASSWORD);
 }
 return true;
 }
 });
 */


 }

 }

Hit the Run button and you should see the app in action. Click on the reveal password button to see the password in plain text.