Password Visibility Toggle — Android Support Library, revision 24.2.0
The Android Support Library was updated very recently with interesting changes. The Password Visibility Toggle especially caught my eye because just two days before I read about this release, I had attempted to implement it myself on a project at work without using any libraries (Lisa Wray developed an awesome one of such libraries by the way).
I took to Twitter to rant about it.
It was therefore one of the first things I tried out because I needed to update my project immediately.
Here’s a very simple tutorial on how to get it to work.
First step
The first and obvious step is to update your support library to version 24.2.0. Hopefully, you are managing your dependency versions using Gradle extra properties. If yes, this implies that you only have to change your dependency version in ONE place. If no, you’ll have to edit your module level Gradle file as many times as the dependency occurs.
supportLibraryVersion = '24.2.0'Next,
The next step is to create a TextInputEditText and set the input type to one of these: textPassword, numberPassword, textVisiblePassword or textWebPassword. I tried out the four input types and noticed that the visibility icon appears for all input types except the textVisiblePassword option which makes sense since that option already makes passwords visible by default.
There are five XML attributes associated with the password visibility toggle.
1. passwordToggleContentDescription which allows a string to be set for the content description.
2. passwordToggleDrawable which allows one set a different icon other than the visibility toggle icon.
3. passwordToggleEnabled which allows you determine whether or not you want the password to be toggled. I think it should only be set if you specifically don’t want your password field to be toggleable (how is this not a word yet? 🙈).
4. passwordToggleTint which allows the visibility toggle icon to be tinted to whatever colors you indicate. It worked for a custom drawable too.
5. passwordToggleTintMode which sets the blending mode used to apply the background tint.
As is typical of Android UI features in XML, it’s also possible to implement these (passwordToggleContentDescription, passwordToggleDrawable, passwordToggleEnabled, passwordToggleTint and passwordToggleTintMode) in the code by creating a TextInputEditText object and calling either of the five related methods.
Observation
Even when I was trying to implement this, I thought the visibility icon should be crossed for the default state indicating that the password was not visible (please refer to the image in my tweet above). The tweet below by Nick Butcher and even Lisa Wray’s library shows the same thing. It was a bit disappointing when I tried the library out and discovered that the default implementation depicting a change of state of the visibility icon was just a slight darkening of the icon. This isn’t obvious enough in my opinion as it could lead to confusion especially among users who like me who have already used this feature on another platform and expect it to act the same way. I had to create a custom StateListDrawable and set it in the passwordToggleDrawable XML attribute to be able to display the type of effect I wanted.
Thought this was great? Please don’t forget to “Recommend” and “Share”.
References:
