We are familiar with password fields in any kind of application. We have also seen various apps where we can toggle password visibility while typing. In android, we use EditText with attribute ‘inputType=”textPassword”‘ in XML layout to implement password field. Question is how to implement that? Should we use some RelativeLayout with ImageView or something else? Wait, it’s not so hard. In this article we will discuss how to change password visibility in EditText.
LIBRARY for Password Visibility
We have used showhidepasswordedittext as dependency to achieve our objective. Add the following lines to your build.gradle(app level) in dependencies section. (Version may change from time to time. Check here for the latest release.)
1 2 3 4 5 6 7 8 9 |
dependencies { ... ... compile 'com.github.scottyab:showhidepasswordedittext:0.8' } |
This library is not available in Maven Central. So you can add it as a library module or use Jitpack.io . Add the remote maven url to your build.gradle(project level) and synch your gradle.
1 2 3 4 5 6 7 8 9 10 11 |
allprojects { repositories { maven { url "https://jitpack.io" } } } |
ACTIVITY & LAYOUT
So all dependencies related works are done. We have successfully added the library we require. Next we will create an Activity to make things work. Here we have created PasswordActivity but you can choose your own.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
package com.digitstory.testapplication; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; public class PasswordActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_password); } } |
activity_password is the layout for PasswordActivity here. So the xml for activity_password would be like
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/activity_password" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingTop="20dp" tools:context="com.digitstory.testapplication.PasswordActivity"> <com.scottyab.showhidepasswordedittext.ShowHidePasswordEditText android:layout_margin="20dp" android:hint="Password" app:tint_color="#00B0FF" android:id="@+id/password" app:drawable_show="@drawable/ic_visibility_on" app:drawable_hide="@drawable/ic_visibility_off" android:inputType="textPassword" android:layout_width="match_parent" android:layout_height="wrap_content" /> <com.scottyab.showhidepasswordedittext.ShowHidePasswordEditText android:layout_margin="20dp" android:hint="Confirm Password" app:tint_color="#E74C3C" android:id="@+id/confirmPassword" app:drawable_show="@drawable/ic_visibility_on" app:drawable_hide="@drawable/ic_visibility_off" android:inputType="textPassword" android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout> |
In the above code you can see we have used ShowHidePasswordEditText(com.scottyab.showhidepasswordedittext.ShowHidePasswordEditText) instead of just an EditText. This comes from the library we are using. But if you follow through to the deep, you will see it is nothing but the extended version of android.widget.EditText which is our very known EditText. Next run your application. You will see out like below
Feel free to comment or ask question if there is any query. If you liked this article spread it out. Subscribe to our newsletter to get more cool stuff.
Reference : showhidepasswordedittext by Scott Alexander-Bown