Android App Polishing: Show UI State Through Icons

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.

As some of you may have noticed, we put a lot of attention to the search form in the Capitaine Train Android app. As I explained in my previous article[1], I'm not a huge fan of long texts. While often offering a great explanation, text requires a lot of parsing time. Icons are often a great alternative to text because they allow user to understand what's going on more rapidly.

When creating the search form, we thought about leveraging icons to help user better understand the current "form state". As a consequence, the form heavily relies on icons:

  • The "To" icon changes whether the search is round trip or not
  • Mandatory fields (i.e "From", "To" and "Passengers") icons turn red when missing
  • A red icon turns grey in edit mode while animating back to red if the field is not set when exiting the edit mode
  • The "Passengers" icon changes depending on the current number of selected passengers (see screencast)

As you can see in the screencast, the change is done as smoothly as possible simply fading between the different states. This can be done fairly easily thanks to a LevelListDrawable[2]. Here is the XML we use in Capitaine Train Android for the "Passengers" icon.

<?xml version="1.0" encoding="utf-8"?>
<level-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- The error icon -->
    <item
        android:drawable="@drawable/ic_search_passengers_0"
        android:maxLevel="0"
        />

    <item
        android:drawable="@drawable/ic_search_passengers_1"
        android:maxLevel="1"
        />

    <item
        android:drawable="@drawable/ic_search_passengers_2"
        android:maxLevel="2"
        />

    <item
        android:drawable="@drawable/ic_search_passengers_several"
        android:maxLevel="10000"
        />

</level-list>

Starting API 11, you can animate changes in a LevelListDrawable or more globally in any DrawableContainer. Unfortunately, the framework only exposes the XML attributes in <selector /> (I really don't know why it has not being exposed to all DrawableContainer :s). Fortunately for us, you can tweak the fading duration values in your Java code with the set[Enter|Exit]FadeDuration(int) methods (yep I also don't know why the duration is an 'int' rather than a 'long').

In our code, we simply update the icon whenever there is an impacting change (an error occurred, the number of selected passenger changed, etc.). Here are some notes about the following snippet of code:

  • mFieldErrorState is a bit mask gathering all of the fields that are currently in error
  • mEditMode contains the current "edit mode" ("Passengers", "From", "To", etc.).
  • LEVEL_ERROR is 0 & LEVEL_NORMAL is 1

private void updateIcons(boolean animated) {
    final int animationDuration = (int) ANIMATION_DURATION;

    // Update the "From" icon...

    // Update the "To" icon...

    final Drawable passengersIcon = mPassengersView.getCompoundDrawables()[TextViewAdditions.INDEX_LEFT];
    if (passengersIcon != null) {
        if (passengersIcon instanceof LevelListDrawable) {
            ((LevelListDrawable) passengersIcon).setEnterFadeDuration(animationDuration);
            ((LevelListDrawable) passengersIcon).setExitFadeDuration(animationDuration);
        }
        int level = LEVEL_ERROR;
        if ((mFieldErrorState & ERROR_PASSENGERS) == 0 || mEditMode == EDIT_MODE_PASSENGERS) {
            level = Math.max(LEVEL_NORMAL, mPassengerIds.size());
        }
        passengersIcon.setLevel(level);
        if (!animated) {
            passengersIcon.jumpToCurrentState();
        }
    }
}

#gde #android  #article #AndroidAppPolishing

[0]: https://play.google.com/store/apps/details?id=com.capitainetrain.android
[1]: https://plus.google.com/118417777153109946393/posts/FABaJhRMCuy
[2]: http://developer.android.com/reference/android/graphics/drawable/LevelListDrawable.html
Animated Photo
Shared publiclyView activity