Shared Element Transition unter Android umsetzen

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.