Profile

Cover photo
Renato Araujo
Works at Canonical Ltd.
Attended Faculdades Integradas de Caratiga
Lives in Recife, Brasil
178 followers|84,911 views
AboutPostsVideos

Stream

Renato Araujo

Shared publicly  - 
 
 
We're running another series of hack days next week, so if you've ever wanted to get involved with the Ubuntu Core Apps, or just want to get started developing with the Ubuntu SDK, be sure to stop by and we'll help you get setup and started.
1
Add a comment...

Renato Araujo

Shared publicly  - 
 
great UI behavior 
 
Android App Polishing: Preserving Context to Help Users

With the release of Capitaine Train for Android[0], 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[1] and described by Brad Frost on his blog[2]: 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. 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 subclasses:

  • FloatingHintAutoCompleteTextView: an AutoCompleteTextView with a floating hint
  • FloatingHintButton: this UI widget is actually a button that displays a date picker dialog when tapped
  • FloatingHintEditText: the floating hint equivalent of an EditText
  • FloatingHintSpinner: 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  

[O]: https://play.google.com/store/apps/details?id=com.capitainetrain.android
[1]: https://dribbble.com/shots/1254439--GIF-Float-Label-Form-Interaction?list=users&offset=28
[2]: http://bradfrostweb.com/blog/post/float-label-pattern/
1
Add a comment...

Renato Araujo

Shared publicly  - 
1
Add a comment...

Renato Araujo

Shared publicly  - 
 
 
Could the Wall from Game of Thrones survive in the real world? 
1
Add a comment...

Renato Araujo

Shared publicly  - 
 
 
Ubuntu Tablet

I just prepped my Nexus 7 with dualboot in preparation for the release tomorrow! I'm so excited!
1
Add a comment...
Have him in circles
178 people
Tiago Hillebrandt's profile photo
Sheldon Demario's profile photo
Marco Mafra's profile photo
Naba Kumar's profile photo

Renato Araujo

Shared publicly  - 
 
More is coming...
 
Dialer, Messaging and Address book apps got design updates. Get the latest proposed image and check them out!
3
Add a comment...

Renato Araujo

Shared publicly  - 
 
 
Exploring GSM Vulnerabilities to Assess Mobile Users’ Location
1
1
Danilo Cesar Lemes de Paula's profile photo
Add a comment...
 
 
Samsung Galaxy S4 is Consumer Reports' new top rated smartphone.

#android   #galaxys4  
1
Add a comment...

Renato Araujo

Shared publicly  - 
 
 
Hands-on - Ubuntu for tablets running on a Nexus 10.
Apps need some optimization , but the OS is surprising snappy.
1
Add a comment...
People
Have him in circles
178 people
Tiago Hillebrandt's profile photo
Sheldon Demario's profile photo
Marco Mafra's profile photo
Naba Kumar's profile photo
Education
  • Faculdades Integradas de Caratiga
    Ciencia da Computacao, 1998 - 2002
Basic Information
Gender
Male
Apps with Google+ Sign-in
Work
Occupation
Software Engineer
Employment
  • Canonical Ltd.
    Software Engineer, 2011 - present
  • INdT
    Software Engineer, 2005 - 2011
  • IBM
    2001 - 2002
  • Banco do Brasil
    2002 - 2005
Places
Map of the places this user has livedMap of the places this user has livedMap of the places this user has lived
Currently
Recife, Brasil
Previously
Minas Gerais, Brasil - Brasilia, Brasil - Bahia, Brasil - Via Velha, Brasil