Android Studio : Password input and reveal password example



Tags : android-studio get-user-password-input-edittext reveal-password java

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.

Android app that accepts password

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.

click on the reveal password to show the password in plain text

NOTE: If you running the app on a real Android device, change the code accordingly to handle touch instead of click

Happy coding!

References:

https://www.socketloop.com/tutorials/android-studio-image-button-and-button-example

https://stackoverflow.com/questions/9951326/basic-android-code-edittexts-inputtype-why-was-the-bitwise-operator-used

https://developer.android.com/reference/android/text/InputType.html

  See also : Android Studio : AlertDialog and EditText to get user string input example



Tags : android-studio get-user-password-input-edittext reveal-password java

By Adam Ng

IF you gain some knowledge or the information here solved your programming problem. Please consider donating to the less fortunate or some charities that you like. Apart from donation, planting trees, volunteering or reducing your carbon footprint will be great too.


Advertisement