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.
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://developer.android.com/reference/android/text/InputType.html
See also : Android Studio : AlertDialog and EditText to get user string input example
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
Tutorials
+3.1k Golang : Fix go-cron set time not working issue
+6.6k Golang : Muxing with Martini example
+47.7k Golang : How to convert JSON string to map and slice
+6.3k Golang : Map within a map example
+3.4k Java : Get FX sentiment from website example
+7.3k Golang : Shuffle strings array
+10.7k Golang : Natural string sorting example
+22.2k Golang : How to read JPG(JPEG), GIF and PNG files ?
+5.7k Golang : Use NLP to get sentences for each paragraph example
+17.6k Golang : Login and logout a user after password verification and redirect example
+9.4k Golang : How to generate Code 39 barcode?