Password Visibility Toggle #AndroidTutorials

Hi all,
Here is my first blog on Password Visibility Toggle.

If you are enthusiastic about programming and love android then do read and give your valuable feedback.

First Step to take,

Android give toggle button on password field after supportLibraryVersion:24.2.0
So firstly update your support library to 24.2.0 or later.

Here is my gradle looks like:
dependencies {
 compile fileTree(include: [‘*.jar’], dir: ‘libs’)
 androidTestCompile(‘com.android.support.test.espresso:espresso-core:2.2.2’, {
 exclude group: ‘com.android.support’, module: ‘support-annotations’
 })
 compile ‘com.android.support:appcompat-v7:25.3.0’
 compile ‘com.android.support.constraint:constraint-layout:1.0.2’
 testCompile ‘junit:junit:4.12’
 compile ‘com.android.support:customtabs:25.3.0’
 compile ‘com.android.support:design:25.3.0’
 
}

As I am using android studio 2.3 I have to add gradle like:

compile ‘com.android.support.constraint:constraint-layout:1.0.2’
 compile ‘com.android.support:customtabs:25.3.0’

You can ignore this gradles if you use Android studio 2.2 or previous version.


Design your Layout:

I am designing my login page and here is the code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:focusableInTouchMode="true"
>

<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
>

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:padding="@dimen/margin_15dp"
>

<!--Email-->
<android.support.design.widget.TextInputLayout
android:id="@+id/til_email_login_activity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/margin_50dp"
android:gravity="center_horizontal"
android:hint="@string/email"
android:textColorHint="@color/text_color"
>

<com.subscription.customview.CustomFontEditText
android:id="@+id/et_email_login_activity"
style="@style/edit_text_style_textcolor_16"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:imeOptions="actionNext"
android:inputType="textEmailAddress"
android:text=""
android:textColor="@color/fab"
/>
</android.support.design.widget.TextInputLayout>


<!--Password-->
<android.support.design.widget.TextInputLayout
android:id="@+id/til_password_login_activity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/til_email_login_activity"
android:layout_marginTop="@dimen/margin_5dp"
android:gravity="center_horizontal"
android:hint="@string/password"
android:textColorHint="@color/text_color"
app:passwordToggleEnabled="true" app:passwordToggleDrawable="@drawable/toggle_pass"
app:passwordToggleTint="@color/light_gray_new"
>

<com.subscription.customview.CustomFontEditText
android:id="@+id/et_password_login_activity"
style="@style/edit_text_style_textcolor_16"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:imeOptions="actionDone"
android:inputType="textPassword"
android:text=""
android:textColor="@color/fab"
/>

</android.support.design.widget.TextInputLayout>


<com.subscription.customview.CustomFontButton
android:id="@+id/btn_login"
style="@style/login_button_style"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/til_password_login_activity"
android:layout_marginTop="@dimen/margin_10dp"
android:text="@string/sign_in"
/>
</RelativeLayout>
</ScrollView>
</RelativeLayout>

There are some attributes which are related to password field.

1. app:passwordToggleContentDescription : Text you can set as a description.

2. app:passwordToggleDrawable : Allow you to set icon.

3. app:passwordToggleEnabled : If you dont want your password field to be toggle then you can set it as a “false” otherwise “true”.

4. app:passwordToggleTint : If you have different color drawable then by giving color to this attribute you can make your drawable customize.

5. app:passwordToggleTintMode : Blending mode used to apply the background tint.


In above code you can see i have put value @drawable/toggle_pass to app:passwordToggleDrawable.

The reason is i want to toggle two different icon for password field.If user’s password is not visible and S/he click on that button then password will be visible and sign of icon will be change as you can see in above video.

Here is the code for drawable file:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"
android:state_pressed="true"
android:drawable="@drawable/ic_visibility_black_24dp"
/> //currently pressed turning the toggle on
<item android:state_pressed="true" android:drawable="@drawable/ic_visibility_black_24dp"/> //currently pressed turning the toggle off
<item android:state_checked="true" android:drawable="@drawable/ic_visibility_black_24dp"/> //not pressed default checked state
<item android:drawable="@drawable/ic_visibility_off_black_24dp"/> //default non-pressed non-checked
</selector>

That’s it!

Doesn’t seem like much at all does it — I hope you can see now just how easy it is to implement the Password Visibility Toggle using the Support Library. If you have any questions on this, then please leave a response.

Thank you, Hope you guys enjoy my very first blog. Stay tune for next one.

Believe in hard work and miracles. Have a Happy coding! :)