Recently, I read an article on Medium that stated that text input is boring! Well, do be exact, Craig Dehner said that app login is boring. Fear not Craig, I've done my part to add excitement where no one really wanted it (IMHO).

What I came up with was the AnimatedEditText

As regular readers of my blog may know. As of late, I've been some what obsessed with EditText (no idea why). I wrote on extending EditText to make a PinEntryEditText; I wrote on creating a prefixed EditText then, quickly realized that prefixing or postfixing an EditText can be achieved using a TextDrawable (I've also used this to add text below and above a TextView). Perhaps this recent obsession made me ripe for targeting this feature.

How are these animations possible with the AnimatedEditText?

There is a simple idea here. Let the EditText work as it normally does, I simply set the text color to transparent. Then I use the same paint settings as those for the EditText and simply draw text in the same position myself (overlaying the transparent text). I draw all the characters 0 to n-1, then for the nth character I add an X and Y offset to it’s position and use value animator to change the values to the offsets from whatever value to zero. The last character also has it’s own paint object allowing for me to modify it’s text size, color, alpha etc. Since I'm drawing the text myself, I can draw any mask I want in it’s place instead.

Feature? You want more features?

In addition to the animations you see above. You can also specify any Unicode character you wish to use as a character mask. This gives you a large variety of custom looks you can support. You can use a bullet, a star, a smiley face, anything!

For example, if you’re working on a dating app, you could have a password mask that could look like this:

There is also a PinEntryEditText available that allows some of the same animations as the AnimatedEditText (pop-in and bottom-up animation) and also allows you to use any Unicode characters you want as masks.

Finally

There are a lot of limitations/known issues with the AnimatedEditText at the moment, you can see the list in the readme file on GitHub. However it should improve over time. For now the code is available with all of it’s limitations on GitHub. Pull requests are appreciated.

P.S. I swear, I've written about a lot of interesting stuff other than EditText. Please check out some of my articles on Medium. And feel free to follow me on Google+, Twitter or LinkedIn.