Android Development

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.


Example:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="@dimen/activity_vertical_margin"
    android:layout_marginLeft="@dimen/activity_horizontal_margin"
    android:layout_marginRight="@dimen/activity_horizontal_margin"
    android:layout_marginBottom="@dimen/activity_vertical_margin">

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:passwordToggleContentDescription="@string/description"
        app:passwordToggleDrawable="@drawable/custom_toggle"
        app:passwordToggleEnabled="true"
        app:passwordToggleTint="@color/colorAccent">

        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/password"
            android:inputType="textPassword"/>
    </android.support.design.widget.TextInputLayout>
</LinearLayout>

Thank you for your time.
Have a nice day.


Mobile dev & testing with Alex Zhukovich

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

Share
Comments
More from Mobile dev & testing with Alex Zhukovich

Great! You’ve successfully signed up.

Welcome back! You've successfully signed in.

You've successfully subscribed to Mobile dev & testing with Alex Zhukovich.

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

Success! Your billing info has been updated.

Your billing was not updated.