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.

password

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 basic different types for displaying password:

textPasswordnumberPassword
passwordpassword
textVisiblePasswordtextWebPassword
password_visiblepassword

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.

password_custom

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.

2 CommentsClose Comments

2 Comments

  • sergbek
    Posted September 22, 2016 at 6:24 pm 0Likes

    Hi, Nick Butcher made a very cool animation on this topic
    https://twitter.com/crafty/status/767767935255453696

  • Thirsty Crow Short Story
    Posted July 17, 2018 at 11:19 am 0Likes

    I like your post because It have very unique ideas and useful information in quality article. Thanks for sharing such a outstanding new topic.

Leave a comment