Lottie Android für Kotlin: Komplette Anleitung mit Beispielen

1. Was ist Lottie und warum wird es verwendet?

Lottie ist eine Open-Source-Bibliothek von Airbnb, die es ermöglicht, After Effects-Animationen in Echtzeit auf mobilen Geräten und im Web darzustellen. Für Android gibt es die offizielle Bibliothek com.airbnb.android:lottie, die Kotlin vollständig unterstützt. Animationen werden aus After Effects in das JSON-Format exportiert (über das Bodymovin-Plugin) und dann in der App ohne Qualitätsverlust und mit minimaler Dateigröße abgespielt.

Warum Lottie verwenden? Erstens vereinfacht es die Zusammenarbeit zwischen Designern und Entwicklern erheblich: Der Designer erstellt komplexe Animationen in seinem gewohnten Tool, und der Entwickler bindet einfach die JSON-Datei ein. Zweitens bietet Lottie eine hohe Leistung – Animationen werden auf der GPU gerendert, was selbst auf älteren Geräten flüssige 60 FPS ermöglicht. Drittens unterstützt die Bibliothek Interaktivität: Sie können die Wiedergabe steuern, Geschwindigkeit, Farben und Größen ändern und sogar einzelne Ebenen programmatisch animieren.

Lottie Android eignet sich ideal für: Ladebildschirme (Splashscreens), animierte Symbole, Übergänge zwischen Bildschirmen, Reaktionen auf Benutzergesten, Mikroanimationen in der Benutzeroberfläche und vieles mehr. Die Bibliothek wird von der Community aktiv gepflegt und bietet Tausende von kostenlosen, fertigen Animationen auf LottieFiles.

2. Installation

Um Lottie in einem Android-Projekt mit Kotlin zu installieren, fügen Sie die folgende Abhängigkeit in Ihre build.gradle-Datei (auf Modulebene) ein:

dependencies {
    implementation 'com.airbnb.android:lottie:6.4.0'
}

Wenn Sie Kotlin DSL (build.gradle.kts) verwenden:

dependencies {
    implementation("com.airbnb.android:lottie:6.4.0")
}

Nach der Gradle-Synchronisation ist die Bibliothek einsatzbereit. Die minimale Android SDK-Version ist 21 (Android 5.0).

Hinweis: Die Befehle pip, npm oder cargo werden für diese Bibliothek nicht verwendet, da es sich um eine native Android-Bibliothek handelt.

3. Schnellstart – Ein minimales funktionierendes Beispiel

Legen Sie Ihre JSON-Animationsdatei (z. B. animation.json) im Ordner app/src/main/res/raw ab. Fügen Sie dann ein LottieAnimationView in Ihre Layout-Datei ein:

<!-- activity_main.xml -->
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animationView"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:lottie_rawRes="@raw/animation"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Der zugehörige Code in der Activity (oder im Fragment) in Kotlin:

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.airbnb.lottie.LottieAnimationView

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val animationView: LottieAnimationView = findViewById(R.id.animationView)
        animationView.playAnimation()
    }
}

Dieses minimale Beispiel spielt die Animation aus der Ressource raw/animation.json in einer Endlosschleife ab.