Android MotionLayout – A First Look

Google hat an der I/O 2018 das MotionLayout vorgestellt. Wie der Name erwarten lässt, ist das neue Layout für Animationen ausgelegt. Es basiert auf dem bereits bekannten CoordinatorLayout und kombiniert dessen Möglichkeit von Key-Frame Animationen mit dem Property Animation Framework. Somit eignet es sich sehr gut für die Animation von komplexen Layout-Änderungen.

Um das MotionLayout etwas besser kennen zu lernen, habe ich mich dazu entschieden, eine alte Demo-App von mir mit dem MotionLayout umzuschreiben. In dieser hatte ich demonstriert, wie man mit Hilfe vom CoordinatorLayout und dem TransitionManager eine Key-Frame Animation umsetzt. Details dazu findet man in einem früheren Blog-Beitrag.

Voraussetzungen

Das MotionLayout ist als Support Library verfügbar und ist bis zu API Level 18 (Android 4.3) abwärtskompatibel. Zum aktuellen Zeitpunkt gibt es noch keinen finalen Release sondern erst eine zweite Alpha Preview. Aus diesem Grund ist es gut möglich, dass es noch zu API Änderungen kommen kann. Um das Layout in einem Android Projekt verwenden zu können, reicht es, die folgende Abhängigkeit in der build.gralde Datei hinzuzufügen:

implementation 'com.android.support.constraint:constraint-layout:2.0.0-alpha2'

Funktionsweise des MotionLayout

Die Positionierung der Views eines MotionLayout definiert man neu mit Hilfe einer sogenannten MotionScene. Diese liegt in einer eigenen XML-Datei im res/xml Verzeichnis.

Darin werden die möglichen Zustände des Layouts beschrieben sowie der Animationsverlauf zwischen den Zuständen. Weiter kann man deklarativ das Verhalten bei Click- und Swipe-Gesten definieren.  Darin äussert sich auch ein weiterer Hauptunterschied vom MotionLayout zu den anderen Animation APIs von Android: eine laufende Animation kann aufgrund von Benutzereingaben fortlaufend gesteuert werden. Dies kann man gut in folgender Grafik nachvollziehen (man achte auf die Touch-Eingabe):

Dieses Beispiel konnte ohne eine Zeile Code rein durch ein MotionLayout (Source) und einer MotionScene (Source) implementiert werden. Die MotionScene enthält jeweils ein ConstraintSet für den ruhenden Startzustand und Endzustand des Layouts. Anschliessend wird in einer Transition die Zeitdauer und die Interpolation der Animation definiert:

<Transition
    android:id="@+id/my_transition"
    app:constraintSetEnd="@+id/ending_set"
    app:constraintSetStart="@+id/starting_set"
    app:duration="250"
    app:interpolator="linear">

    <OnSwipe
        app:dragDirection="dragUp"
        app:touchAnchorId="@+id/image_background"
        app:touchAnchorSide="bottom" />

</Transition>

Die Interaktivität mit der Swipe-Geste konnte einfach mit dem OnSwipe-Handler implementiert werden.

Weitere Informationen

Google hat mehrere sehr gute Beispiele zum MotionLayout veröffentlicht. Diese reichen von simplen Implementationen bis hin zu komplexe Animationsabläufen:

• https://github.com/googlesamples/android-ConstraintLayoutExamples

Weiter haben die Entwickler von Google auch mehrere, sehr detaillierte  Artikel veröffentlicht. Diese beschreiben z.B. das Animieren von eigenen Attributen und die Verwendung von Key-Frames:

• https://medium.com/google-developers/introduction-to-motionlayout-part-i-29208674b10d

Fazit

Obwohl das MotionLayout erst als Alpha Preview verfügbar ist und ich mir noch nicht jedes Detail genau anschauen konnte, bin ich davon sehr angetan. Besonders die deklarative Art, wie man den Verlauf von einem Layout zum anderen definieren kann, empfinde ich als angenehm. Google hat bekannt gegeben, dass mit der finalen Version des MotionLayouts auch ein Editor im Android Studio Designer erscheinen soll. Im Zusammenspiel mit diesem erhoffe ich mir einen schnellen Feedback-Loop bei der Implementierung von komplexen Animationsverläufen.