Como criar uma animação para tela inicial do seu App (Splash Screen Animado)

1

Você já deve ter visto alguma vez um aplicativo ao abrir exibir uma tela de entrada com o logo da empresa ou até mesmo com uma imagem criativa para diferenciar o seu aplicativo dos demais, neste tutorial vamos aprender a criar essa tela de entrada.

Referência

IMPORTANTE
Este exemplo foi criado com a versão mais recente do Android Studio 2.2 Preview 3 e é importante ficar atento que já estou utilizando o novo formato de layout do Android, o ConstraintLayout.

Caso você ainda não tenha atualizado seu Android Studio e continua com a versão estável, não se preocupe, basta adicionar a referência da dependência em seu gradle (build.gradle) nível de módulo.

1. Mão na massa

Primeiro precisamos criar um novo projeto (File -> New -> New Project) e na janela Add an Activity to Mobile, selecione a opção Empty Activity.

Projeto Empty Activity
Agora precisamos criar uma nova Activity (File -> New -> Activity -> Empty Activity)

Empty Activity
Precisamos corrigir a chamada da Activity no arquivo de Manifesto do Android conforme o código abaixo.

Não se assuste se aparecer uma falha neste ponto, isso significa que você ainda não criou o estilo chamado FullScreen. Faremos isso agora editando os arquivos (../res/values/styles.xml e ../res/values-v21/styles.xml).

Faça o download desta imagem (Clique aqui) e copie para a pasta ../res/drawable-nodpi

Pronto. Agora vamos alterar o layout da tela de SplashScreen.

Agora vamos criar as animações.

Crie uma pasta chamada anim dentro da pasta res do projeto e nela vamos criar dois arquivos de animação (File -> New -> Animation resource file) com nomes alpha.xml e translate.xml e vamos ao código deles.

No alpha.xml o que fizemos foi criar uma animação com uma duração de 3 segundos partindo do alpha 0 até alpha 1, ou seja, o objeto animado será exibido gradativamente dentro do tempo estipulado.

No translate.xml o que fizemos foi criar uma animação com uma duração de 2 segundos onde o objeto inicie o movimento vertical de baixo para cima com uma porcentagem relativa de 200% do ponto central até chegar ao centro 0%.

Tudo pronto, agora vamos fazer a mágica acontecer via programação.

A mágica toda ocorre no método abaixo, que nada mais é do que chamar a animação e aguardar por um tempo estipulado para fazer a chamada da próxima Activity.

2. Código completo

Código Fonte

Clique aqui para baixar o projeto completo.

Qualquer dúvida deixe seu comentário

Share.

About Author

gorio

Engenheiro de Computação, com 6 anos de experiência e vivência no mundo de Sistemas Embarcados e Mobile.

1 comentário

Leave A Reply

*