Password visibility toggle in Android EditText

April 13, 2017

20.21K VIEWS

We are familiar with password fields in any kind of application. We have also seen various apps where we can toggle password visibility while typing. In android, we use EditText with attribute ‘inputType=”textPassword”‘ in XML layout to implement password field. Question is how to implement that? Should we use some RelativeLayout with ImageView or something else? Wait, it’s not so hard. In this article we will discuss how to change password visibility in EditText.

LIBRARY for Password Visibility

We have used showhidepasswordedittext as dependency to achieve our objective. Add the following lines to your build.gradle(app level) in dependencies section. (Version may change from time to time. Check here for the latest release.)



dependencies {
    ...
    ...
    compile 'com.github.scottyab:showhidepasswordedittext:0.8'
}

dependencies {

...

compile 'com.github.scottyab:showhidepasswordedittext:0.8'

}

This library is not available in Maven Central. So you can add it as a library module or use Jitpack.io . Add the remote maven url to your build.gradle(project level) and synch your gradle.



allprojects {
    repositories {
        maven {
            url "https://jitpack.io"
        }
    }
}

allprojects {

repositories {

maven {

url "https://jitpack.io"

}

ACTIVITY & LAYOUT

So all dependencies related works are done. We have successfully added the library we require. Next we will create an Activity to make things work. Here we have created PasswordActivity but you can choose your own.



package com.digitstory.testapplication;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class PasswordActivity extends AppCompatActivity {

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

package com.digitstory.testapplication;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

public class PasswordActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_password);

}

activity_password is the layout for PasswordActivity here. So the xml for activity_password would be like



<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_password"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="20dp"
    tools:context="com.digitstory.testapplication.PasswordActivity">
    <com.scottyab.showhidepasswordedittext.ShowHidePasswordEditText
        android:layout_margin="20dp"
        android:hint="Password"
        app:tint_color="#00B0FF"
        android:id="@+id/password"
        app:drawable_show="@drawable/ic_visibility_on"
        app:drawable_hide="@drawable/ic_visibility_off"
        android:inputType="textPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <com.scottyab.showhidepasswordedittext.ShowHidePasswordEditText
        android:layout_margin="20dp"
        android:hint="Confirm Password"
        app:tint_color="#E74C3C"
        android:id="@+id/confirmPassword"
        app:drawable_show="@drawable/ic_visibility_on"
        app:drawable_hide="@drawable/ic_visibility_off"
        android:inputType="textPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:id="@+id/activity_password"

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:paddingTop="20dp"

tools:context="com.digitstory.testapplication.PasswordActivity">

<com.scottyab.showhidepasswordedittext.ShowHidePasswordEditText

android:layout_margin="20dp"

android:hint="Password"

app:tint_color="#00B0FF"

android:id="@+id/password"

app:drawable_show="@drawable/ic_visibility_on"

app:drawable_hide="@drawable/ic_visibility_off"

android:inputType="textPassword"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

<com.scottyab.showhidepasswordedittext.ShowHidePasswordEditText

android:layout_margin="20dp"

android:hint="Confirm Password"

app:tint_color="#E74C3C"

android:id="@+id/confirmPassword"

app:drawable_show="@drawable/ic_visibility_on"

app:drawable_hide="@drawable/ic_visibility_off"

android:inputType="textPassword"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

</LinearLayout>

In the above code you can see we have used ShowHidePasswordEditText(com.scottyab.showhidepasswordedittext.ShowHidePasswordEditText) instead of just an EditText. This comes from the library we are using. But if you follow through to the deep, you will see it is nothing but the extended version of android.widget.EditText which is our very known EditText. Next run your application. You will see out like below

anroid password visibility

Feel free to comment or ask question if there is any query. If you liked this article spread it out. Subscribe to our newsletter to get more cool stuff.

Reference : showhidepasswordedittext by Scott Alexander-Bown