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.

Animationen sind ein wichtiges Mittel um die Ausdrucksstärke eines User Interfaces zu erhöhen. Sinnvoll eingesetzt lassen sich damit nicht nur Wartezeiten beim Laden von Inhalten überbrücken, sondern auch Informationen vermitteln. Eine in Apps oft eingesetzte Animation ist die sogenannte Shared Element Transition. Mit ihr werden räumliche oder hierarchische Zusammenhänge zwischen Elementen vermittelt und eine kontinuierliche User Experience ermöglicht.

In folgendem Beispiel möchte ich zeigen, wie man in wenigen Schritten eine Shared Element Transition unter Android implementiert. Die Animation wird in diesem Beispiel eingesetzt um von der Hauptansicht (Listenansicht) zu einer Detailansicht zu wechseln. Das fertige Resultat sieht wie folgt aus:

Shared Element Transition

Der komplette Code samt Beispiel App kann hier gefunden werden.

Shared Element Transition – Walkthrough

Ab Android 5 kann man Shared Element Transitions bereits in wenigen Schritten implementieren:

Window Content Transitions aktivieren

Als erstes muss man Content Transitions im Application Theme aktivieren. Dazu setzt man folgendes Flag:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
	<item name="android:windowContentTransitions">true</item>
</style>

Transition Name festlegen

Shared Element Transitions können zwischen Fragments aber auch zwischen Activites stattfinden. In diesem Beispiel verwende ich zwei Activities mit eigenen Layouts. Das zu animierende Element muss in beiden Layouts den gleichen Transition Name besitzen. Diesen kann man entweder direkt im XML festlegen oder im Code per setTransitionName setzen. Da die Listenansicht eine vielzahl von dynamischen Elementen enthalten kann, konnte ich den Transition Name nicht statisch im XML setzten. Stattdessen habe die Implementierung innerhalb des Viewholders verwendet:

class ViewHolder(private val containerView: View, private val itemClick: (Monkey, ImageView) -> Unit)
        : RecyclerView.ViewHolder(containerView) {

        fun bind(monkey: Monkey) {
            with(monkey) {
                Picasso.get()
                        .load(monkey.imageUrl)
                        .placeholder(R.drawable.placeholder)
                        .into(containerView.imageView)
                containerView.textView_name.text = name
                containerView.setOnClickListener { itemClick(this, containerView.imageView) }
                containerView.imageView.transitionName = name
            }
        }
}

Einfachheitshalber habe ich es so gelöst, dass der Transition Name einer Item-View jeweils dem Namen des Objektes (in diesem Fall Affen) entspricht.

Activity starten

Als nächstes muss man nun die Detail-Activity starten. Dabei muss zusätzlich auch ein Bundle mitgegeben werden, welches die Optionen der Scene Transition enthält.

val options = ActivityOptionsCompat.makeSceneTransitionAnimation(this, imageView, monkey.name)
startActivity(MonkeyDetailActivity.newIntent(this, monkey), options.toBundle())

Da ich keinen statischen Transition Name verwendet habe, musste ich zusätzlich noch sicherstellen, dass auch auf der Detail-Activity der korrekte Transition Name gesetzt wird.

Weitere Optionen

Man hat man auch die Möglichkeit mehrere Elemente auf einmal zu animieren. Allerdings sollte man aufpassen, dass die Animation nicht zu überladen wirkt. Weiter kann man auch die Art der Animation beim hin- und zurücknavigieren anpassen. Dabei kann man eigene Transitions erstellen oder bereits bestehende verwenden (z.B. explode, slide, fade).

Fazit

Meiner Meinung nach sind Animationen ein wichtiger Bestandteil von modernen Apps und sie können einen wichtigen Beitrag zur User Experience leisten. Android liefert viele Mittel um Animationen schnell und einfach zu implementieren. Allerdings soll hier auch angemerkt sein, dass dieses Beispiel eher simpel gehalten wurde und durchaus auch komplexere und aufwendigere Implementationen möglich sind. Besonders im Fine-Tuning kann der Aufwand wieder ansteigen. Google liefert hierzu aber umfangreiche Beispiele und Erklärungen. Ebenso geben auch die Material Design Guidelines einen guten Einstieg in das Thema und zeigen Beispiele, wo man Animationen sinnvoll einsetzt.

Im Fall der Shared Element Transition ist ebenfalls zu beachten, dass diese erst ab Android 5 unterstützt werden.