Android usando Lottie — Kotlin

Mar 27 2023

Neste post, aprenderemos sobre a animação Lottie no Android usando Kotlin com exemplo. Passaremos por diferentes exemplos de atributos relacionados a LottieFiles.

Neste post, aprenderemos sobre a animação Lottie no Android usando Kotlin com exemplo. Passaremos por diferentes exemplos de atributos relacionados a LottieFiles. Veremos como definir a velocidade de reprodução da animação, carregar a animação do url no aplicativo Android usando a biblioteca Lottie, etc.

Iniciar

Lottie é uma biblioteca criada pelo AirBnb que permite adicionar animações ao seu aplicativo Android. Adicionar animações com Lottie é super fácil e pode ser feito em apenas algumas linhas de código!

LottieFiles.com tem milhares de animações gratuitas que você pode usar em seus projetos. Você pode até editar as cores da animação com o editor embutido no site. Lembre-se de dar crédito aos criadores originais se decidir usar qualquer animação LottieFiles.

As animações podem ser adicionadas ao seu aplicativo em seus arquivos xml de layout ou em seu código. Neste breve tutorial, abordarei como adicionar animações nos dois sentidos.

1. Crie um projeto

Em primeiro lugar, siga os passos abaixo para criar um novo projeto.

Vá para Arquivo => Novo => Novo Projeto . Isso abrirá uma nova janela. Em seguida, na seção Telefone e tablet , selecione Esvaziar atividade . Em seguida, clique em Avançar .

Na próxima tela, selecione o nome do projeto como LottieAnimation . Em seguida, preencha outros detalhes necessários.

Em seguida, clicar no botão Concluir cria um novo projeto.

2. Adicionando dependências Lottie (build.gradle)

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

Clique no botão Sincronizar agora mostrado no canto superior direito do Android Studio IDE.

3. Faça o download do arquivo de animação Lottie

Agora, precisamos baixar os arquivos de animação que queremos usar em nosso projeto. Eles estão presentes em vários formatos — formatos JSON, ZIP ou GIF, etc. Neste artigo, usaremos o formato json. Então, vamos baixar o arquivo json.

Siga os passos abaixo para baixar o arquivo de animação lottie –

Vá parahttps://lottiefiles.com/featurede baixe o arquivo de animação no formato Json.

Agora, crie a pasta raw , se não criada, na pasta src/main/res .
Em seguida, mova o arquivo json baixado, renomeado como animation.json, para a pasta src/main/res/raw . A estrutura da pasta será como –

Até agora, baixamos e movemos com sucesso o arquivo json para a pasta src/main/res/raw . Agora, usaremos o arquivo de animação no arquivo 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 Configurar ViewBinding

Precisamos configurar viewBinding para que não precisemos usar findViewById() para acessar qualquer visualização no arquivo Kotlin. Adicione viewBinding = true no arquivo app/build.gradle .

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

Abra o arquivo MainActivity.kt e escreva o código abaixo nele

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 prosseguirmos, precisamos remover alguns atributos no arquivo xml. Vamos configurá-lo programaticamente no arquivo Kotlin. Então, abra o arquivo activity_main.xml e copie/cole o código abaixo nele/

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

Lembre-se de que removemos a animação de configuração no arquivo xml. Agora, executaremos a mesma animação lottie usando Kotlin programaticamente.