Android App Polishing: Preserving Context to Help UsersWith the release of Capitaine Train for Android, several people recently asked me how we implemented some of the tips & tricks available in the application (some of these tricks are barely visible but remember, I love details :p). In order to showcase some of the most interesting application bits of code, I thought it could be helpful to Android developers to start a small series of posts. Feel free to comment this article if you want me to describe something you found nice in the Capitaine Train application.
Just like every other applications, The Capitaine Train app contains several forms: sign in/up form, user info forms, etc. Forms are usually a pain in the ass to develop because you need to make sure they are clean enough not to annoy the user but verbose enough to let her/him understand what kind of information she/he is currently filling in.
When implementing the first internal versions of the application we obviously used EditText
as our favorite class. Unfortunately, we rapidly faced an issue with the default design of EditText
: the user loses context once at least one character is typed into a field. Because EditText
uses the "hint" string as the field's description, we had some pre-filled fields that were almost impossible to understand.
In order to overcome this issue, we decided to implement an emerging pattern introduced by Matt D. Smith on Dribble and described by Brad Frost on his blog: the float label pattern. We actually called it internally (i.e the classes are named after): the floating hint pattern.
The implementation is rather simple and consists on a base class we called FloatingHintControl
is an abstract container that is made of a TextView
and requires an additional 'interactable' View
(i.e. the control). The floating hint is displayed/animated depending on the control state as reported by subclasses. In the current public build of Capitaine Train, we have several FloatingHintControl
: an AutoCompleteTextView
with a floating hint
: this UI widget is actually a button that displays a date picker dialog when tapped
: the floating hint equivalent of an EditText
: A Spinner
that always displays a floating hint description
Preserving user's context is both essential and difficult to do on mobile applications. Because screens sizes are generally small you always have to weight the pros and cons of adding information on screen. If you are not really satisfied about the built-in EditText
, the floating hint may be a great compromise when designing forms in your Android applications. #gde #android #AndroidAppPolishing