Como criar uma SplashScreen no Android.

Nesse artigo vou explicar como criar uma tela de abertura no android, conhecida como SplashScreen utilizando a biblioteca Lottie, desenvolvida pela Airbnb. Também veremos as vantagens de utilizar uma animação feita no Lottie ao invés de uma imagem ou gif.

Conhecendo a biblioteca Lottie

O Lottie é uma biblioteca para Android e iOS que utiliza animações do Adobe After Effects exportadas como JSON com Bodymovin e as renderiza nativamente no celular!

Mais exemplos de animações podem ser vistas no Github

Mas, afinal, qual a vantagem de utilizar uma animação em JSON?

Abaixo estão listadas algumas vantagens de utilizar o json bodymovin ao invés de algumas outras opções disponíveis no mercado.

1. Os Gifs têm mais do que o dobro do tamanho de um JSON bodymovin e são renderizados em um tamanho fixo que não pode ser ampliado para corresponder a telas grandes e de alta densidade.
2. As sequências PNG são ainda piores do que os GIFs, pois seus tamanhos de arquivo costumam ser de 30 a 50 vezes o tamanho do bodymovin json e também não podem ser aumentadas.
3. Drawable vetorial animado. Requer mais desempenho porque é executado no RenderThread em vez do Thread principal.

O que é uma SplashScreen?

Basicamente são conhecidas como Splash Screens, telas que são apresentadas ao usuário no primeiro instante em que ele abre uma aplicação, justamente para apresentarmos uma marca/logo, ou então realizarmos algum tipo de pré prossamento que exige alguns segundos para ser concluído.

Criação

Nesse artigo seguiremos 4 passos para a criação da nossa tela de abertura, que são eles:

1. Adicionar a dependência do Lottie ao gradle
2. Baixar uma animação no formato .json
3. Criar a Activity que será a nossa tela de abertura
4. Adicionar a animação ao layout .xml

Adicionando dependência ao gradle

com o projeto android criado, vamos no build.gradle no módulo do app e adicionamos a seguinte linha e pressionamos Sync.

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

Baixando uma animação

Para fazer o download de uma animação json utlizaremos o site Lottie Files, basta navegar até Discover > Free Animations e selecionar uma de seu gosto.

Exemplo de download

Após o download ser concluído criaremos um package raw para adicionar o arquivo, que ficará no seguinte caminho res/raw.

exemplo de pasta raw

Criando Activity

Criaremos uma nova activity com o nome SplashScreen no qual ficará o código responsável por gerar um atraso na abertura.

Criação de uma Activity

Feito isso, adicionaremos o seguinte código:

Adicionando animação ao layout

Abrindo nosso arquivo activity_splash_screen adicionaremos o código do exemplo do Lottie.

Parâmetros

lottie_autoPlay: Boolean que define se a animação irá iniciar assim que a tela estiver carregada.

app:lottie_loop: Boolean que defina se a animação será executada em loop.

app:lottie_rawRes: Informar animação a ser aplicada, a mesma deve estar no diretório raw.

Resultado

A animação utilizada foi a seguinte

Até a próxima!

Esse foi um exemplo de como criar uma SplashScreen bonitona! hehehe. Obrigado pela leitura e até a próxima! :)

O projeto pode ser baixado através do Github