Android avec Lottie — Kotlin

Mar 27 2023

Dans cet article, nous découvrirons l'animation Lottie dans Android en utilisant Kotlin avec un exemple. Nous allons passer en revue différents exemples d'attributs liés à LottieFiles.

Dans cet article, nous découvrirons l'animation Lottie dans Android en utilisant Kotlin avec un exemple. Nous allons passer en revue différents exemples d'attributs liés à LottieFiles. Nous verrons comment définir la vitesse de lecture de l'animation, charger l'animation à partir de l'URL dans l'application Android à l'aide de la bibliothèque Lottie, etc.

Commencer

Lottie est une bibliothèque créée par AirBnb qui vous permet d'ajouter des animations à votre application Android. Ajouter des animations avec Lottie est super simple et peut se faire en quelques lignes de code seulement !

LottieFiles.com propose des milliers d'animations gratuites que vous pouvez utiliser dans vos projets. Vous pouvez même modifier les couleurs de l'animation avec l'éditeur intégré sur le site. N'oubliez pas de donner crédit aux créateurs originaux si vous décidez d'utiliser des animations LottieFiles.

Des animations peuvent être ajoutées à votre application dans vos fichiers xml de mise en page ou dans votre code. Dans ce court tutoriel, je vais expliquer comment ajouter des animations dans les deux sens.

1. Créer un projet

Dans un premier temps, suivez les étapes ci-dessous pour créer un nouveau projet.

Allez dans Fichier => Nouveau => Nouveau projet . Cela ouvrira une nouvelle fenêtre. Ensuite, sous la section Téléphone et tablette , sélectionnez Activité vide . Ensuite, cliquez sur Suivant .

Dans l'écran suivant, sélectionnez le nom du projet comme LottieAnimation . Ensuite, remplissez les autres détails requis.

Ensuite, cliquer sur le bouton Terminer crée un nouveau projet.

2. Ajout de dépendances Lottie (build.gradle)

implementation 'com.airbnb.android:lottie:6.0.0'

Cliquez sur le bouton Sync Now affiché dans le coin supérieur droit d'Android Studio IDE.

3. Télécharger le fichier d'animation Lottie

Maintenant, nous devons télécharger les fichiers d'animation que nous voulons utiliser dans notre projet. Ils sont présents dans différents formats - formats JSON, ZIP ou GIF, etc. Dans cet article, nous utiliserons le format json. Donc, nous allons télécharger le fichier json.

Suivez les étapes ci-dessous pour télécharger le fichier d'animation lottie -

Aller àhttps://lottiefiles.com/featuredet téléchargez le fichier d'animation au format Json.

Maintenant, créez un dossier brut , s'il n'est pas créé, dans le dossier src/main/res .
Ensuite, déplacez le fichier json téléchargé, renommé animation.json, dans le dossier src/main/res/raw . La structure des dossiers sera comme -

Jusqu'à présent, nous avons téléchargé et déplacé avec succès le fichier json dans le dossier src/main/res/raw . Maintenant, nous allons utiliser le fichier d'animation dans le fichier 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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        app:lottie_rawRes="@raw/animation" />
 
</androidx.constraintlayout.widget.ConstraintLayout>

5.1 Configurer le ViewBinding

Nous devons configurer viewBinding afin que nous n'ayons pas besoin d'utiliser findViewById() pour accéder à n'importe quelle vue dans le fichier Kotlin. Ajoutez viewBinding = true dans le fichier app/build.gradle .

android {
  
    // OTHER CODE...
  
    buildFeatures {
        viewBinding = true
    }
}

Ouvrez le fichier MainActivity.kt et écrivez-y le code ci-dessous

package com.example.lottieanimation

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.example.lottieanimation.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
    }
}

Avant de continuer, nous devons supprimer certains attributs du fichier xml. Nous allons le définir par programmation dans le fichier Kotlin. Alors, ouvrez le fichier activity_main.xml et copiez / collez le code ci-dessous /

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
 
</androidx.constraintlayout.widget.ConstraintLayout>

N'oubliez pas que nous avions supprimé l'animation de configuration dans le fichier xml. Maintenant, nous allons exécuter la même animation de loterie en utilisant kotlin par programmation.

Alors, ouvrez votre fichier MainActivity.Kt. Ensuite, ajoutez le code ci-dessous

class MainActivity : AppCompatActivity() {
 
    private lateinit var binding: ActivityMainBinding
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        val view = binding.root
        setContentView(view)
 
        setupAnimation()
    }
 
    private fun setupAnimation() {
        binding.animationView.setAnimation(R.raw.animation)
        binding.animationView.repeatCount = LottieDrawable.INFINITE
        binding.animationView.playAnimation()
    }
}

setAnimation() définit l'animation sur LottieAnimationView
repeatCount définit le nombre de fois que l'animation doit être jouée
playAnimation() lit l'animation définie dans LottieAnimationView

Nous pouvons également effectuer certaines actions par programmation dans l'animation Lottie comme décrit ci-dessous

6.1 Reprendre l'animation Lottie

Nous pouvons reprendre l'animation de loterie en utilisant la méthode .resumeAnimation() . Par exemple,

binding.animationView.resumeAnimation()

Si nous voulons définir la vitesse de lecture de l'animation, nous pouvons le faire en utilisant la méthode setSpeed() . Par exemple,

binding.animationView.speed = 5.0F

Si nous voulons définir l'animation Lottie à partir de l'URL, nous pouvons le faire en utilisant la méthode setAnimationFromUrl() . Par exemple,