Lottie Android pour Kotlin : guide complet avec exemples

1. Qu'est-ce que Lottie et pourquoi l'utiliser ?

Lottie est une bibliothèque open source créée par Airbnb qui permet de restituer des animations After Effects en temps réel sur mobile et sur le web. Pour Android, la bibliothèque officielle com.airbnb.android:lottie prend entièrement en charge le langage Kotlin. Les animations sont exportées depuis After Effects au format JSON (via le plugin Bodymovin), puis lues dans l'application sans perte de qualité et avec une taille de fichier minimale.

Pourquoi utiliser Lottie ? D'abord, elle simplifie considérablement le travail des designers et des développeurs : le designer crée une animation complexe dans son outil habituel, et le développeur n'a plus qu'à intégrer le fichier JSON. Ensuite, Lottie offre des performances élevées : les animations sont rendues sur le GPU, garantissant 60 FPS même sur les appareils anciens. Enfin, la bibliothèque prend en charge l'interactivité : vous pouvez contrôler la lecture, modifier la vitesse, les couleurs, les dimensions, et même animer des calques individuels par programmation.

Lottie Android est idéal pour : les écrans de chargement (splash screens), les icônes animées, les transitions entre écrans, les réactions aux gestes de l'utilisateur, les micro-animations dans l'interface utilisateur, et bien plus encore. La bibliothèque est activement maintenue par la communauté et propose des milliers d'animations gratuites prêtes à l'emploi sur LottieFiles.

2. Installation

Pour installer Lottie dans un projet Android avec Kotlin, ajoutez la dépendance dans le fichier build.gradle (au niveau du module) :

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

Si vous utilisez Kotlin DSL (build.gradle.kts) :

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

Après la synchronisation de Gradle, la bibliothèque est prête à être utilisée. La version minimale du SDK Android est 21 (Android 5.0).

Notez que les commandes pip, npm ou cargo ne sont pas utilisées pour cette bibliothèque, car il s'agit d'une bibliothèque Android native.

3. Démarrage rapide — exemple minimal fonctionnel

Placez le fichier JSON de l'animation (par exemple, animation.json) dans le dossier app/src/main/res/raw. Ajoutez ensuite LottieAnimationView dans votre fichier de layout :

<!-- 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>

Code dans l'Activity (ou Fragment) en 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()
    }
}

Cet exemple minimal lira l'animation depuis la ressource raw/animation.json en boucle infinie.