Password EditText

Introduction

Ever wished that Android had a built-in Password EditText with a Show/Hide button? No? Well, here’s a tutorial for one anyway.

Password EditText

 

Building a custom Password Edit Text

In order to get a Password EditText we’ll first need to create a custom view extending a EditText. Let’s create a new PasswordEditText.java class:

Next, we’ll need to define some custom attributes for our view. Let’s start off by defining its: action text, colour and size. To make things easier, we’ll need to be able to define these attributes in the view’s layout.xml file. As a result, we’ll need to define these attributes as styleables, by creating a new /res/values/attrs.xml file:

Next, we’ll need to associate these attributes with our custom view. So, let’s start off by giving them some default values:

We’ll now need to initialize them when our view is created:

Awesome, all we need now is the Show/Hide action text. The EditText (being an extension of TextView) has built-in Compound Drawables and we’ll use those to house our action text. Since the end goal is to insert an editable message (SHOW / HIDE) in our custom view, we’ll just need to find a way to convert a String into a drawable – this is where the magic happens. We’ll create TextView and style it with our custom attributes (text, colour, size). Once we’re happy with it, we just essentially take a screenshot of it, convert that into a drawable and assign it as a Compound Drawable:

Great, now we’ve got a custom drawable inside our view. We just need a way to handle touch events to determine what happens when users click it. To do this, our custom view will need to implement a View.OnTouchListener to handle this event. Then, all we have to do is get our drawable’s dimensions  and decide what happens when a touch event is registered within those coordinates:

Wrapping things up

And that’s basically it. We’ve created a custom Password EditText, defined it’s attributes, added a custom editable drawable and defined what happens when users tap it. This is how the final PasswordEditText.java class looks like:

We just need to add it to res/layout/activity_main.xml and see it in action:

Notice that we’re setting our custom attributes in a XML layout file. We can also do the same programmatically:

 

That’s it. Check out the full source code here.

 

Share this on: