Android - Material Design Tutorial : 10 ( Password visibility toggle )

Password Visibility Toggle:

Recently , Android support library 24.2.0 is released and _ “Password Visibility Toggle ”_ is introduced.

Check “API Updates” tab here for 24.2.0

What is Password Visibility Toggle :

As per Material Design Guideline ,

Using this icon, we can enable and disable password visibility in a password input field.

When the visibility icon is displayed with a text field, it indicates whether or not that field’s input is visible. The text field’s visibility may be toggled on or off using the icon:

  • Visibility enabled: Icon opacity at 54%, with the password visible

  • Visibility disabled: Icon opacity at 38%, with the password represented by midline ellipses

How it was before ?

normal_android_password_visibility_toggle

How it is now ?

 current_android_password_visibility_toggle

How to include Password Visibility Toggle ?

  1. Create one simple Application on Android Studio with one Activity as ”MainActivity.java” with its layout as ”activity_main.xml

  2. Update your “dependencies” tab as below :

dependencies {
compile 'com.android.support:appcompat-v7:24.2.0'
compile 'com.android.support:design:24.2.0'
}
  1. Create one login Screen : Update your activity_main.xml as
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:background="@color/colorBack"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/layout_email"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColorHint="@color/colorHint">

        <EditText
            android:id="@+id/editTextEmail"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/hint_email"
            android:inputType="textEmailAddress"
            android:textColor="@color/textColor" />
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/layout_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/layout_email"
        android:textColorHint="@color/colorHint">

        <EditText
            android:id="@+id/editTextPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="45dp"
            android:hint="@string/hint_password"
            android:inputType="textPassword"
            android:textColor="@color/textColor" />
    </android.support.design.widget.TextInputLayout>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/layout_email"
        android:layout_marginTop="104dp"
        android:background="@color/buttoncolor"
        android:text="Login"
        android:textColor="@color/textColor" />
</RelativeLayout>
  1. Update your colors.xml :
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="colorBack">#263238</color>
    <color name="buttoncolor">#00838F</color>
    <color name="textColor">#ffffff</color>
    <color name="colorHint">#546E7A</color>
</resources>

Also strings.xml :

<resources>
    <string name="app_name">CustomVisibilityPwd</string>
    <string name="hint_email">Enter Your email</string>
    <string name="hint_password">Enter Password</string>
    <string name="hint_empty">This field cannot be blank</string>
    <string name ="error_email">Please enter a valid email</string>
</resources>

That’s it. Run this application and you will see the changes as the second image above.

More Customization :

Currently , following are the supported attributes we can use ( as defined in the documentation )  :

[table class =“table table-striped”  caption=""  colalign=“left|left”] no,attribute,meaning 1,android.support.design:passwordToggleContentDescription,Text to set as the content description for the password input visibility toggle. 2,android.support.design:passwordToggleDrawable,Drawable to use as the password input visibility toggle icon. 3,android.support.design:passwordToggleEnabled,Whether the view will display a toggle when the EditText has a password. 4,android.support.design:passwordToggleTint,Icon to use for the password input visibility toggleMay be a color value 5,android.support.design:passwordToggleTintMode,Blending mode used to apply the background tint. [/table]

a) add xmlns to your :

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

Now update your password field with a different icon and a different icon color :

<android.support.design.widget.TextInputLayout
    android:id="@+id/layout_password"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/layout_email"
    android:textColorHint="@color/colorHint"
    app:passwordToggleEnabled = "true"
    app:passwordToggleTint="@color/colorHint"
    app:passwordToggleDrawable="@drawable/ic_android_white_18dp">

 Output will be like the second gif above with a different icon and color .

You can check this project on Github.

Don’t forget like our facebook page, Share and subscribe for weekly new articles ?