Android 5.0: Bewegte UIs dank Lollipop

Parallel mit dem neuen Material Design [1] möchten die Macher von Android auch eine deutlich verbesserte User Experience ermöglichen. Ziel ist es, dem Nutzer von Android-Anwendungen direktes visuelles Feedback auf seine Interaktionen zu geben. Zu diesem Zweck wurden einige vordefinierte Animationen für Button und Activity-Übergänge in das neue Theme eingearbeitet:

• Touch Feedback
• Reveal Effect
• Activity Transitions
• View State Changes

Zusätzliche Erweiterungen sind dank speziellem API natürlich ebenfalls möglich. Dazu später mehr.

Android 5.0 Touch Feedback

Berührt bzw. drückt man in dem neuen Material Theme einen Button, so wird diese Aktion per Default via Ripple Effect, also durch eine Art Wellenanimation, visuell hervorgehoben. Rein technisch gesehen wird dafür die Klasse RippleDrawable herangezogen, wobei der Anfangs- und Endzustand der Animation individuell definiert werden kann. Ändert man nichts an den vorgegebenen Einstellungen, breitet sich die bei der Selektion des Buttons anzuzeigende Hintergrundfarbe wellenförmig aus. Ist eine andere Animation gewünscht, kann diese individuell gesetzt werden.

Reveal Effect

Möchte man bewusst Bereiche seines UI kreisförmig auf- bzw. abdecken, kann dafür die Methode createCircularReveal aus der Klasse ViewAnimationUtils verwendet werden. Neben den XY-Koordinaten des Kreismittelpunkts kann zusätzlich ein Start- und Endradius für die Einblendung angegeben werden, um so die Animation nach seinen eigenen Wünschen zu steuern. Als Resultat liefert die Methode ein Objekt vom Typ ValueAnimator zurück, mit dessen Hilfe die Animation später gestartet und kontrolliert werden kann. Ein ValueAnimator erlaubt übrigens auch die Registrierung eines AnimationListeners oder eines AnimatorUpdateListeners. Während der AnimationListener lediglich den Start, die Wiederholung oder das Ende einer Animation signalisiert, kann mithilfe des AnimatorUpdateListeners gezielt auf jeden Framewechsel reagiert werden.

Listing 1 zeigt ein Codefragment, in dem die eben beschriebene Animation verwendet wird, um eine View animiert auzublenden.

// previously visible view
final View myView = findViewById(R.id.my_view);
 
// get the center for the clipping circle
int cx = (myView.getLeft() + myView.getRight()) / 2;
int cy = (myView.getTop() + myView.getBottom()) / 2;
 
// get the initial radius for the clipping circle
int initialRadius = myView.getWidth();
 
// create the animation (the final radius is zero) 
Animator anim =
    ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0);
 
// make the view invisible when the animation is done
anim.addListener(new AnimatorListenerAdapter() {
    @Override
    public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);
        myView.setVisibility(View.INVISIBLE);
    }
});
 
// start the animation
anim.start();

Activity Transitions

Ein besonderes Augenmerk legt die neue Android-Version auf den vereinfachten, animierten Übergang zwischen Activities. Neben der Verwendung von Enter und Exit Transitions zur Definition, wie Elemente der beteiligten Activities ein- bzw. ausgeblendet werden sollen, kann mithilfe einer oder mehrerer zusätzlicher Shared Element Transitionsbestimmt werden, wie in den Activities gemeinsam vorhandene Elemente bei einem Übergang animiert werden (Abb. 1).

Als vordefinierte Enter bzw. Exit Transitions stehen die drei Varianten explode, slide und fade zur Verfügung, deren Namen mehr oder minder selbsterklärend für den zu erwartenden Effekt sein sollten. Und auch für die Transition von gemeinsamen Elementen existieren in Android Lollipop mit changeBounds, changeClipBounds, changeTransform und moveImage einige vordefinierte Effekte.

Listing 2 zeigt die Aktivierung der Activity Transitions. Für die Enter bzw. Exit Transitions wird der explode-Effekt und für die Shared Element Transition der moveImage-Effekt gewählt.

<style name="BaseAppTheme" parent="android:Theme.Material">
  <!-- enable window content transitions -->
  <item name="android:windowContentTransitions">true</item>
 
  <!-- specify enter and exit transitions -->
  <item name="android:windowEnterTransition">@transition/explode</item>
  <item name="android:windowExitTransition">@transition/explode</item>
 
  <!-- specify shared element transitions -->
  <item name="android:windowSharedElementEnterTransition">
    @transition/change_image_transform</item>
  <item name="android:windowSharedElementExitTransition">
    @transition/change_image_transform</item>
</style>

Natürlich ist es ebenfalls möglich, sowohl für die Enter bzw. Exit als auch für die Shared Element Transitions eigene Effekte via XML oder Java-Code zu hinterlegen, um sie dann zur Laufzeit heranzuziehen.

Animierte View State Changes

Mit dem Touch Feedback haben wir bereits einen ersten Eindruck davon gewonnen, wie eine verbesserte User Experience dem Nutzer helfen soll, Android-5.0-Anwendungen und ihre Ergonomie besser zu verstehen. In die gleiche Richtung zielt die neue Klasse StateListAnimator, die dazu dient, Statusänderungen von UI-Elementen visuell hervorzuheben.

Während die eigentliche Animation – in unserem Fall das leichte Anheben/Absenken eines Buttons – in einer eigenen XML-Ressource angegeben wird (Listing 3), erfolgt die Zuweisung der Animation zum View-Element innerhalb der Deklaration des View-Elements selbst in der zugehörigen Layout-XML.

<!-- animate the translationZ property of a view when pressed -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_pressed="true">
    <set>
      <objectAnimator 
         android:propertyName="translationZ"
         android:duration="@android:integer/config_shortAnimTime"
         android:valueTo="2dp"
         android:valueType="floatType"/>
         <!-- you could have other objectAnimator elements
              here for "x" and "y", or other properties -->
    </set>
  </item>
  <item android:state_enabled="true"
        android:state_pressed="false"
        android:state_focused="true">
    <set>
      <objectAnimator 
        android:propertyName="translationZ"
        android:duration="100"
        android:valueTo="0"
        android:valueType="floatType"/>
    </set>
  </item>
</selector>

Fazit

Die neuen Animation-APIs in Android 5.0 Lollipop schließen nahtlos an das in Android 4.4. eingeführte Transition-Framework [2] an und erlauben es, innerhalb der eigenen App nahezu beliebige Animationen für Touch Feedback, View State Changes und Activity Transitions zu definieren.

Um das Rad dabei nicht in jeder App neu erfinden zu müssen, gibt Android 5.0 Lollipop für alle drei Anwendungsbereiche sinnvolle Defaults vor, die auf den ersten Blick einen guten Eindruck machen – dies gilt zumindest für einen ersten Test im Emulator. Möchte man die neuen Features einmal in Aktion sehen, ohne dafür gleich selbst in die Tasten greifen zu müssen, kann auf entsprechende Beispiele zurückgegriffen werden [3].

Wie immer bei gut gemeinten Elementen zur Verbesserung der User Experience besteht leider auch bei den neuen Animation-APIs die Gefahr der Überreizung. Auch wenn die derzeit vorgegebenen Standardwerte auf den ersten Blick sinnvoll erscheinen, ist nicht auszuschließen, dass die Effekte einen Nutzer nach einer gewissen Zeit eher stören als helfen. Entsprechend wichtig ist insbesondere bei der Definition von eigenen Animationen der sparsame und gezielte Einsatz der neuen Möglichkeiten, oder anders formuliert: „Weniger ist häufig mehr“.