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
- TextInputLayout adds support for the password visibility toggle from the material design specification.”
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 ?
How it is now ?
How to include Password Visibility Toggle ?
-
Create one simple Application on Android Studio with one Activity as ”MainActivity.java” with its layout as ”activity_main.xml”
-
Update your “dependencies” tab as below :
dependencies {
compile 'com.android.support:appcompat-v7:24.2.0'
compile 'com.android.support:design:24.2.0'
}- 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>- 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 ?