Last week we started to talk about how ugly forms can be displayed and raised some issues about it. Today is time to stop ranting and start contributing.
A while ago thanks to Chris Banes and Cyril Mottier there was a buzz around a pattern called Floating Label Layout. I used this approach in the last project I’ve been working on and the feedback was very good. Therefore, I’m releasing this small library called FloatingHints which you could use if you want to add a bit of styling to those ugly forms.
The snapshot version is already available at Sonatype while the release version will be soon released at Maven Central.
If you wouldn’t use that form, why would the user?
In the previous post from the series we saw one of the most common form structures. A couple of EditText where the user will write the user and password and a button used to start the Login action.
With the addition of the Floating Label pattern one can have a much nicer and clear screen. No one likes to fill these forms, not even the users excited about using your service… so why don’t we encourage them to do so?
One of the key features of FloatingHints is that the animations which are in charge of showing or hiding the floating hint are fully customisable. By default, the hint will be shown using a Slide in to Top and will be hidden using a Slide out to Bottom
This can be easily customised via XML attributes.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
The result of using Fade In and Fade Out is pretty good too!
Customise the color of the hint
FloatingHintEditTextLayout uses the attribute
floatLayoutTextAppearance to change the TextAppearance
of the Label.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
1 2 3 4 5
1 2 3 4
This way we’ve just changed the text appearance of the label to yellow.
Stay tuned for the next post of the series!