Profile

Cover photo
Michael Panzer
Works at APPSfactory.de
808 followers|2,375,741 views
AboutPostsPhotosYouTubeReviews

Stream

Michael Panzer

Shared publicly  - 
 
Alright! Awesome! Have to take a better look at dribble and start coding...
 
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/
10
2
Daniel Scheidler's profile photoPascal Heidmann's profile photoJeroen Wiert Pluimers's profile photo
 
+Matias Duarte should take a look!
Add a comment...

Michael Panzer

Shared publicly  - 
 
Spannung
 ·  Translate
14
Yves Sulser's profile photoMichael Panzer's profile photo
2 comments
 
Geilo :D
Add a comment...

Michael Panzer

Shared publicly  - 
 
Juhuuu
6
Resul Kocyigit's profile photo
 
Hmmm... need that one too :)
Add a comment...

Michael Panzer

Shared publicly  - 
 
I see this thing quite a lot around here...
17
Patric Kurth's profile photoMurat Altintas's profile photoArvid Gerstmann's profile photoIngo Schaupp's profile photo
7 comments
 
Oh, i8. Wusste gar nicht, dass es so einen gibt ...
 ·  Translate
Add a comment...
Have him in circles
808 people
Stefan Wendhausen's profile photo

Michael Panzer

Shared publicly  - 
 
How come I browse this stupid site every day but I don't find these API level 1 objects that are really awesome! Thx +Cyril Mottier for this!
3
1
Ivo Encarnação's profile photo
Add a comment...

Michael Panzer

Shared publicly  - 
 
Yeah
17
Stefan M.'s profile photoFirat Kizilirmak's profile photoMichael Panzer's profile photoManuel Altherr's profile photo
6 comments
 
Ich würde ja gern welche kaufen, die den Versionen entsprechen - so wie die aufm GooglePlex - nur in klein :>

Dürfte dann aber irgendwann ein bissl viel werden :D

Mein klassischer Andy guckt mich immer so schief an - ich glaub der ist auch einsam ;)
 ·  Translate
Add a comment...

Michael Panzer

Shared publicly  - 
 
There are things that's you've never would've searched for in the APIs...
5
Add a comment...

Michael Panzer

Shared publicly  - 
 
 compile 'com.jakewharton:butterknife:4.+'

to 

 compile 'com.jakewharton:butterknife:5.+'

sync

done
 
Fans of lipids and cutlery rejoice, Butter Knife v5.0 has been released! Read on and learn about what's new:

@InjectViews
Views are frequently operated on in groups as a result of some event. Text views animate in on new screens, input fields are enabled and disabled for network calls, etc. Group multiple views together using the @InjectViews annotation into a List or array for easy operation.

  @InjectViews({ R.id.first_name, R.id.last_name })
  List<TextView> nameViews;

ButterKnife.apply
Coupled with the aforementioned annotation to aggregate views, apply provides a concise way to operate on those groups of views at once.

  ButterKnife.apply(nameViews, DISABLE);
  ButterKnife.apply(nameViews, ENABLED, false)

The Action[1] and Setter[2] interfaces provide easy ways to define operations.

  static final Action<View> DISABLE = new Action<>() {
    @Override public void apply(View view, int index) {
      view.setEnabled(false);
    }
  }
  static final Setter<View, Boolean> ENABLED = new Setter<>() {
    @Override public void set(View view, Boolean value, int index) {
      view.setEnabled(value);
    }
  }

You can use Android's Property[3] with apply as well.

  ButterKnife.apply(nameViews, View.ALPHA, 0);

New multi-callback listeners
* @OnItemSelected for AdapterView.OnItemSelectedListener's onItemSelected callback.
* @OnPageChange for ViewPager.OnPageChangeListener's onPageChange callback.
* @OnTextChange for TextWatcher's onTextChange callback.

Each of these new listeners have multiple callback methods. Change which callback your method is being bound to by supplying a callback argument.

  @OnItemSelected(R.id.list)
  void onItemSelected(long id) {
    // ...
  }

  @OnItemSelected(value= R.id.list, callback = NOTHING_SELECTED)
  void onNothingSelected() {
    // ...
  }

Enjoy! And #DeathToBoilerplate !

* Website: http://jakewharton.github.io/butterknife/
* Changelog: https://github.com/JakeWharton/butterknife/blob/master/CHANGELOG.md
* Javadoc: http://jakewharton.github.io/butterknife/javadoc/


[1]: http://jakewharton.github.io/butterknife/javadoc/butterknife/ButterKnife.Action.html
[2]: http://jakewharton.github.io/butterknife/javadoc/butterknife/ButterKnife.Setter.html
[3]: https://developer.android.com/reference/android/util/Property.html
1
1
Ivo Encarnação's profile photoArvid Gerstmann's profile photoWolfram Rittmeyer's profile photo
2 comments
 
+Arvid Gerstmann Your version has the disadvantage that it always tries to hit the server to look for a newer version of the library. Though it uses the same cached file since no newer lib is available. That's at least my understanding of gradle. If you have plenty of dependencies, this might slow down your build.
Add a comment...

Michael Panzer

Shared publicly  - 
 
 
#pixelpushing #firstworldengproblems  

"Borrowing" this piece of code from some other app developed by the company, when I realize that I'm not quite 100% certain how it's supposed to work and I send a quick email to the person who wrote it only to get the immediate out-of-office-be-back-in-two-weeks reply, I'm all like...
7
Add a comment...

Michael Panzer

Shared publicly  - 
 
I hate to be late at the game but this thing is just awesome!! o_O :-D
6
Johannes Homeier's profile photo
 
Took you a while :D
Add a comment...
People
Have him in circles
808 people
Stefan Wendhausen's profile photo
Basic Information
Gender
Male
Work
Employment
  • APPSfactory.de
    Softwareentwickler, 2013 - present
Links
Wir waren an einem warmen Mittwochabend, im doch recht großen Außenbereich des La Mirabelle, zum ersten mal. Da es keine Karte gibt, also zumindest bei unserem Besuch, musste die super nette Bedienung größere Tafeln zu unserem Tisch bringen und uns das Angebot doch ein wenig erklären. Das hat sich jedoch sehr kompetent gemacht. Das Essen war kurz zusammengefasst einfach nur spitze! Ich hatte ja nichts überwältigendes erwartet von einem französischen Lokal, aber meine Erwartungen wurden mehr als übertroffen. Die Preise sind voll und ganz gerechtfertigt und für zwei Personen mit Vorspeise und Hauptgang standen am Ende 59€ auf der Rechnung. Alles in Allem war ich mit meinem Geburtstagsessen mehr als zufrieden und werde das La Mirabelle auf jeden Fall wieder besuchen...
• • •
Public - 7 months ago
reviewed 7 months ago
1 review
Map
Map
Map