UI components

Password Visibility Toggle

Alex Zhukovich 2 min read
Password Visibility Toggle
Table of Contents

Recently, I wrote few articles about testing, but right now I would like to talk to you about very useful thing that called Password Toggle. This part of component started being available from Android Support Library 24.2.0.

Demo: password visibility

Nowadays many applications use "Log In" option and this component allows you do it very simply with material design specification with one simple component without any additional styles and custom components.

First of all, you need to add or update dependency for design support library:

dependencies {
    compile 'com.android.support:design:24.2.0'

The main idea here is to use TextInputEditText component for displaying password visibility field. The TextInputEditText component has few different types for displaying password:

  • textPassword
  • numberPassword
  • textVisiblePassword
  • textWebPassword

We can also use few different XML attributes for password visibility.

  • passwordToggleContentDescription – a string can be set as content description;
  • passwordToggleDrawable – an icon can be set as visibility toggle icon;
  • passwordToggleEnabled – a boolean value can be set as enable parameter;
  • passwordToggleTint – a color can be set as tinted visibility toggle;
  • passwordToggleTintMode – a blended mode can be applying to background tint.
TextInputEditText custom toggle

I also recommend to use a TextInputEditText inside the TextInputLayout.


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



Thank you for your time.
Have a nice day.

Mobile development with Alex

A blog about Android development & testing, Best Practices, Tips and Tricks

More from Mobile development with Alex
Jetpack Compose: Divider
Jetpack Compose

Jetpack Compose: Divider

This article covers using and customizing the “Dividers” components from the "Material 2" and "Material 3" libraries in the Jetpack Compose. In addition to that, we will explore the difference between implementation of the Divider, HorizontalDivider and VerticalDivider.
Alex Zhukovich 4 min read
Jetpack Compose: Switch
Jetpack Compose

Jetpack Compose: Switch

This article covers creating and customizing the "Switch" component in Jetpack Compose for enabling/disabling features. It explores differences between "Material" and "Material 3" libraries, and how to interact with and verify the Switch component's state in UI tests.
Alex Zhukovich 8 min read

Great! You’ve successfully signed up.

Welcome back! You've successfully signed in.

You've successfully subscribed to Mobile development with Alex.

Success! Check your email for magic link to sign-in.

Success! Your billing info has been updated.

Your billing was not updated.