Android usando Lottie — Kotlin

Mar 27 2023

En esta publicación, aprenderemos sobre la animación de Lottie en Android usando Kotlin con un ejemplo. Veremos diferentes ejemplos de atributos relacionados con LottieFiles.

En esta publicación, aprenderemos sobre la animación de Lottie en Android usando Kotlin con un ejemplo. Veremos diferentes ejemplos de atributos relacionados con LottieFiles. Veremos cómo configurar la velocidad de reproducción de la animación, cargar la animación desde la URL en la aplicación de Android usando la biblioteca Lottie, etc.

Empezar

Lottie es una biblioteca creada por AirBnb que le permite agregar animaciones a su aplicación de Android. ¡Agregar animaciones con Lottie es súper fácil y se puede hacer con solo unas pocas líneas de código!

LottieFiles.com tiene miles de animaciones gratuitas que puedes usar en tus proyectos. Incluso puede editar los colores de la animación con el editor incorporado en el sitio. Recuerde dar crédito a los creadores originales si decide usar cualquier animación de LottieFiles.

Se pueden agregar animaciones a su aplicación en sus archivos xml de diseño o en su código. En este breve tutorial, repasaré cómo agregar animaciones en ambos sentidos.

1. Crear un Proyecto

Al principio, siga los pasos a continuación para crear un nuevo proyecto.

Vaya a Archivo => Nuevo => Nuevo proyecto . Esto abrirá una nueva ventana. Luego, en la sección Teléfono y tableta , seleccione Actividad vacía . Luego, haga clic en Siguiente .

En la siguiente pantalla, seleccione el nombre del proyecto como LottieAnimation . Luego, complete otros detalles requeridos.

Luego, al hacer clic en el botón Finalizar se crea un nuevo proyecto.

2. Agregar dependencias de Lottie (build.gradle)

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

Haga clic en el botón Sincronizar ahora que se muestra en la esquina superior derecha de Android Studio IDE.

3. Descarga el archivo de animación de Lottie

Ahora, necesitamos descargar los archivos de animación que queremos usar en nuestro proyecto. Están presentes en varios formatos: formatos JSON, ZIP o GIF, etc. En este artículo, utilizaremos el formato json. Entonces, descargaremos el archivo json.

Siga los pasos a continuación para descargar el archivo de animación Lottie:

Ir ahttps://lottiefiles.com/featuredy descargue el archivo de animación en formato Json.

Ahora, cree una carpeta sin procesar , si no se creó, en la carpeta src/main/res .
Luego, mueva el archivo json descargado, renombrado como animation.json, en la carpeta src/main/res/raw . La estructura de carpetas será como:

Hasta ahora, hemos descargado y movido con éxito el archivo json a la carpeta src/main/res/raw . Ahora, usaremos el archivo de animación en el archivo 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 Configuración de vinculación de vistas

Necesitamos configurar viewBinding para que no necesitemos usar findViewById() para acceder a cualquier vista en el archivo Kotlin. Agregue viewBinding = true en el archivo app/build.gradle .

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

Abra el archivo MainActivity.kt y escriba el código a continuación en él

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)
    }
}

Antes de continuar, debemos eliminar algunos atributos en el archivo xml. Lo configuraremos mediante programación en el archivo Kotlin. Por lo tanto, abra el archivo activity_main.xml y copie/pegue el siguiente código en él/

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

Recuerde que habíamos eliminado la animación de configuración en el archivo xml. Ahora, ejecutaremos la misma animación de lottie usando kotlin mediante programación.