Open In App

How to Toggle Password Visibility in Android?

Improve
Improve
Like Article
Like
Save
Share
Report

As we know that toggling means switching between the two different options by pressing a single button. So In this article, we would be seeing how to change the password visibility by pressing a single button (here it would be eye button), ie with an input of password type, we can also enable an icon, that can show or hide the text that the user is typing. To implement this project we would be using the TextInputLayout(child of Linear Layout), which is a design component that comes with the Android Material Design Library.Since we would be entering the password, TextInputEditText will be used instead of normal EditText, since TextInputEditText is a sub-class  of EditText and TextEditText is a child of TextInputLayout.There are five XML attributes associated with the password visibility toggle.

  • passwordToggleEnabled: This attribute has its value either true or false, so when we want the password to be toggleable, we should assign this attribute the true value.
  • passwordToggleTint: allows giving the color the visibility toggle icon.
  • passwordToggleTintMode: allows giving different background modes to the toggle icon.
  • passwordToggleDrawable: allows us to give a different icon instead of the default eye image to the toggle icon.
  • passwordToggleContentDescription: Allows us to give the description to the toggle icon.

A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Kotlin language. 

Toggle Password Visibility in Android

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.

Step 2: Working with the activity_main.xml file

Now go to the activity_main.xml file which represents the UI of the application. Below is the code for the activity_main.xml file. Comments are added inside the code to understand the code in more detail.

XML




<!--xml code for the project-->
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    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"
    tools:context=".MainActivity">
    
<!--TextInput layout which acts as a wrapper to the edit text-->
<com.google.android.material.textfield.TextInputLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColorHint="#0F9D58"
        app:hintTextAppearance="@style/TextAppearance.AppCompat.Large"
        android:hint="Enter your password..."
        <!--Enabling the password toggle>                                                
        app:passwordToggleEnabled="true"
        <!--applying the tint to the password visibility toggle-->
        app:passwordToggleTint="@color/colorPrimary"
  
        android:scrollbarSize="25dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">
  
        <!--Using the TextInputEditText,which is 
            same as the edit text,but remember-->
        <!--that we need to use TextInputEditText 
            with TextInputLayout-->
 <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:textSize="30dp"
            android:inputType="textPassword"
            android:ems="15"/>
  
 </com.google.android.material.textfield.TextInputLayout>
  
</androidx.constraintlayout.widget.ConstraintLayout>


Step 3: Working with the build.gradle (App Level File)

Import the dependency on the material components in the dependency section.

dependencies {

   // …

   implementation ‘com.google.android.material:material:<version>’

   // …

 }

Step 4: Working with the MainActivity.kt file

Go to the MainActivity.kt file, and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail. Since there is no logic that needs to be executed in this project, MainActivity does not contain any code.

Kotlin




import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}


Output:



Last Updated : 17 Nov, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads