O Google usa tecnologia de IA na tradução de conteúdos para seu idioma de preferência. As traduções com IA podem ter erros.

Telas de apresentação

A partir do Android 12, os apps são iniciados com uma tela de apresentação do sistema que inclui um movimento de entrada no app ao iniciar, uma tela de apresentação mostrando o ícone do app e uma transição para ele. A tela de apresentação é uma Window e, portanto, abrange uma Activity.

Figura 1. Uma tela de apresentação.

A experiência da tela de apresentação fornece elementos de design padrão a cada inicialização do app, mas também é personalizável para que os apps possam manter o branding exclusivo deles.

Para personalizar a tela de apresentação do seu app, use a biblioteca de compatibilidade SplashScreen do Jetpack. Ela envolve a API SplashScreen da plataforma e funciona com qualquer ComponentActivity, incluindo atividades que definem a interface com o Compose usando setContent.

Como a tela de apresentação funciona

Quando um usuário inicia um app enquanto o processo do app não está em execução (uma inicialização a frio) ou a Activity não foi criada (uma inicialização com estado salvo), os eventos a seguir ocorrem:

O sistema mostra a tela de apresentação usando os temas e as animações que você definiu.
Quando o app estiver pronto, a tela de apresentação será dispensada e o app será exibido.

A tela de apresentação nunca é mostrada durante uma inicialização a quente.

Elementos e mecânicas da tela de apresentação

Os elementos da tela de apresentação são definidos por arquivos de recursos XML no arquivo de manifesto do Android. Há versões para os temas claro e escuro de cada elemento.

Os elementos personalizáveis de uma tela de apresentação são o ícone do app, o plano de fundo do ícone e o plano de fundo da janela:

Tela de apresentação com balões numerados para os elementos personalizáveis — **Figura 2**. Elementos personalizáveis de uma tela de apresentação.

Considere os seguintes elementos, mostrados na figura 2:

1 O ícone do app precisa ser um drawable vetorial. Ele pode ser estático ou animado. Embora as animações possam ter uma duração ilimitada, recomendamos não exceder 1.000 milissegundos. O ícone na tela de início é o padrão.

2 O plano de fundo do ícone é opcional e útil se você precisa de mais contraste entre o ícone e o plano de fundo da janela. Se você usar um ícone adaptativo, o plano de fundo dele vai ser exibido se houver contraste suficiente com o plano de fundo da janela.

3 Assim como nos ícones adaptativos, um terço do primeiro plano é mascarado.

4 O plano de fundo da janela consiste em uma única cor opaca. Se o plano de fundo da janela estiver definido e tiver uma cor simples, ele vai ser usado por padrão caso o atributo não seja definido.

Dimensões da tela de apresentação

O ícone da tela de apresentação usa as mesmas especificações dos ícones adaptativos, da seguinte forma:

Imagem da marca: precisa ter 200×80 dp.
Ícone do app com plano de fundo: precisa ter 240×240 dp e caber em um círculo com 160 dp de diâmetro.
Ícone do app sem plano de fundo: precisa ter 288×288 dp e caber em um círculo de 192 dp de diâmetro.

Por exemplo, se o tamanho original de uma imagem for 300×300 dp, o ícone precisa caber em um círculo com um diâmetro de 200 dp. Tudo o que estiver fora do círculo vai ficar invisível (mascarado).

Figura 3. Dimensões do ícone de tela de apresentação para planos de fundo sólidos e transparentes, respectivamente.

Animações da tela de apresentação e sequência de inicialização

A latência extra geralmente está associada à inicialização a frio de um aplicativo. Um ícone animado na tela de apresentação tem um visual atraente e oferece uma experiência premium. Pesquisa de usuário mostra que a percepção do tempo de inicialização é menor ao visualizar uma animação.

Uma animação na tela de apresentação é incorporada aos componentes da sequência de inicialização, conforme mostrado na Figura 4.

Sequência de inicialização em doze frames consecutivos, começando com o toque no ícone na tela de início e preenchendo a tela à medida que ela aumenta — **Figura 4**. Sequência de lançamento.

Animação de entrada: consiste na visualização do sistema para a tela de apresentação. Ela é controlada pelo sistema e não pode ser personalizada.
Tela de apresentação (mostrada durante a parte de "espera" da sequência): é possível personalizar a tela de apresentação para mostrar um logotipo animado próprio e o branding da sua marca. A tela precisa atender aos requisitos descritos nesta página para funcionar corretamente.
Animação de saída: consiste na animação que oculta a tela de apresentação. Se você quiser personalizá-lo, use a visualização SplashScreenViewProvider e o ícone dela. Você pode executar qualquer animação neles usando as configurações de transformação, opacidade e cor. Nesse caso, remova manualmente a tela de apresentação quando a animação for concluída.

Ao executar a animação de ícones, a inicialização do app oferece a opção de pular a sequência nos casos em que o app carregar antes. O app aciona onResume() ou a tela de apresentação expira automaticamente. Portanto, confira se o movimento pode ser pulado sem problemas. A tela de apresentação só vai ser dispensada com onResume() quando o app estiver estável do ponto de vista visual, portanto, não é necessário mostrar outros ícones de carregamento. Mostrar uma interface incompleta pode ser desagradável para os usuários e pode passar a impressão de imprevisibilidade ou falta de cuidado.

Requisitos para animações da tela de apresentação

A tela de apresentação precisa atender às especificações abaixo:

Defina apenas uma cor para o plano de fundo da janela, sem transparência. A biblioteca de compatibilidade SplashScreen oferece suporte aos modos diurno e noturno.
Confira se o ícone animado atende às especificações abaixo:
- Formato: o ícone precisa ser um XML de AnimatedVectorDrawable (AVD).
- Dimensões: um ícone AVD precisa ter quatro vezes o tamanho de um ícone adaptativo, desta forma:
  - A área do ícone precisa ter 432 dp. Em outras palavras, quatro vezes a área de 108 dp de um ícone adaptativo não mascarado.
  - Os dois terços internos da imagem precisam ser visíveis no ícone na tela de início e precisam ter 288 dp. Ou seja, quatro vezes os 72 dp que compõem a área interna mascarada de um ícone adaptativo.
- Duração: recomendamos não exceder 1.000 milissegundos para smartphones. É possível usar um início atrasado, mas ele não pode ter mais de 166 ms. Se o tempo de inicialização do app for maior que 1.000 ms, considere uma animação que se repete.
Estabeleça um momento adequado para dispensar a tela de apresentação, o que acontece quando o app mostra o primeiro frame. É possível personalizar ainda mais esse recurso, conforme descrito na seção sobre manter a tela de apresentação por mais tempo.

Recursos da tela de apresentação

Figura 5. Exemplo de AVD.

Faça o download do exemplo de kit básico, que demonstra como criar, formatar e exportar uma animação para um AVD. Inclui o seguinte:

Arquivo de projeto do Adobe After Effects da animação.
Arquivo XML exportado final do AVD.
Exemplo de GIF da animação.

Ao fazer o download desses arquivos, você aceita os Termos de Serviço do Google.

A maneira como lidamos com os dados nesse serviço está descrita na Política de Privacidade do Google.

Personalizar a tela de apresentação no app

Por padrão, a SplashScreen usa o windowBackground do tema se windowBackground tiver uma só cor. Para personalizar a tela de apresentação, adicione atributos ao tema do app.

É possível personalizar a tela de apresentação do app das seguintes maneiras:

Defina atributos de tema para mudar a aparência.
Mantendo a apresentação na tela por mais tempo.
Personalizar a animação para dispensar a tela de apresentação.

Primeiros passos

A biblioteca principal SplashScreen leva a tela de apresentação do Android 12 para todos os dispositivos com a API de nível 23 e mais recentes. Para adicionar ao projeto, adicione o seguinte snippet ao arquivo build.gradle:

Groovy

dependencies {
    implementation "androidx.core:core-splashscreen:1.2.0"
}

Kotlin

dependencies {
    implementation("androidx.core:core-splashscreen:1.2.0")
}

Em seguida, crie um tema de tela de apresentação que herde de Theme.SplashScreen, defina postSplashScreenTheme como o tema que a atividade vai usar depois, aplique o tema da tela de apresentação no manifesto (consulte Migrar a implementação da tela de apresentação existente para o Android 12) e chame installSplashScreen() na atividade inicial antes de chamar super.onCreate(), conforme mostrado nos exemplos nas seções a seguir.

Definir um tema para a tela de apresentação para mudar a aparência dela

Você pode especificar os atributos abaixo no tema Activity para personalizar a tela de apresentação do app. Se você já tiver uma implementação de tela de apresentação legada que use atributos como android:windowBackground, considere fornecer um arquivo de recurso alternativo para o Android 12 ou versões mais recentes.

Use windowSplashScreenBackground para preencher o plano de fundo com uma única cor específica:
```
<item name="android:windowSplashScreenBackground">@color/...</item>
```
Use windowSplashScreenAnimatedIcon para substituir o ícone no centro da janela inicial.

Para apps destinados apenas ao Android 12 (nível 32 da API), faça o seguinte:

Se o objeto for animável e drawable por meio de AnimationDrawable e AnimatedVectorDrawable, defina windowSplashScreenAnimationDuration para reproduzir a animação enquanto mostra a janela inicial. Isso não é necessário para o Android 13, porque a duração é inferida diretamente da AnimatedVectorDrawable.
```
<item name="android:windowSplashScreenAnimatedIcon">@drawable/...</item>
```
Use windowSplashScreenAnimationDuration para indicar a duração da animação do ícone da tela de apresentação. Isso não vai afetar o momento em que a tela de apresentação é mostrada, mas a duração pode ser recuperada ao personalizar a animação de saída usando SplashScreenViewProvider.iconAnimationDurationMillis. Consulte a seção a seguir sobre como manter a tela de apresentação por períodos mais longos para saber mais.
```
<item name="android:windowSplashScreenAnimationDuration">1000</item>
```
Use windowSplashScreenIconBackgroundColor para definir um plano de fundo por trás do ícone da tela de apresentação. Isso é útil quando não há contraste suficiente entre o plano de fundo da janela e o ícone.
```
<item name="android:windowSplashScreenIconBackgroundColor">@color/...</item>
```
Você pode usar windowSplashScreenBrandingImage para definir a imagem que vai ser mostrada na parte de baixo da tela de apresentação. No entanto, as diretrizes de design recomendam não usar uma imagem da marca.
```
<item name="android:windowSplashScreenBrandingImage">@drawable/...</item>
```
Use windowSplashScreenBehavior para especificar se o app sempre vai mostrar o ícone na tela de apresentação no Android 13 e versões mais recentes. O valor padrão é 0, que mostra o ícone na tela de apresentação se a atividade de inicialização definir splashScreenStyle como SPLASH_SCREEN_STYLE_ICON ou seguir o comportamento do sistema se a atividade de inicialização não especificar um estilo. Se você preferir nunca mostrar uma tela de apresentação vazia e quiser que o ícone animado seja sempre exibido, defina o valor como icon_preferred.
```
<item name="android:windowSplashScreenBehavior">icon_preferred</item>
```

Manter a tela de apresentação por mais tempo

A tela de apresentação é dispensada assim que o app exibe o primeiro frame. Se você precisar carregar uma pequena quantidade de dados, como as configurações no app usando um disco local de forma assíncrona, use setKeepOnScreenCondition para manter a tela de apresentação na tela até que os dados estejam prontos. A condição é avaliada antes de cada frame ser renderizado. Portanto, mantenha-a rápida para evitar o bloqueio da interface.

Se a atividade inicial terminar antes do desenho, por exemplo, se você não definir a visualização do conteúdo e terminar antes de onResume, não será necessário definir uma condição.

override fun onCreate(savedInstanceState: Bundle?) {
    // Install the splash screen before calling super.onCreate().
    val splashScreen = installSplashScreen()
    super.onCreate(savedInstanceState)

    // Keep the splash screen on-screen until the initial data is ready.
    // The condition is checked each time the app is about to draw a frame.
    splashScreen.setKeepOnScreenCondition { !viewModel.isReady.value }

    setContent {
        MyApp()
    }
}SplashScreenSnippets.kt

Personalizar a animação para dispensar a tela de apresentação

Você pode personalizar ainda mais a animação da tela de apresentação usando setOnExitAnimationListener. O listener recebe um SplashScreenViewProvider que fornece a visualização da tela de apresentação para animação. Chame remove() quando a animação terminar.

override fun onCreate(savedInstanceState: Bundle?) {
    val splashScreen = installSplashScreen()
    super.onCreate(savedInstanceState)

    // Add a callback that's called when the splash screen is animating to the
    // app content.
    splashScreen.setOnExitAnimationListener { splashScreenViewProvider ->
        val splashScreenView = splashScreenViewProvider.view
        // Create your custom animation.
        val slideUp = ObjectAnimator.ofFloat(
            splashScreenView,
            View.TRANSLATION_Y,
            0f,
            -splashScreenView.height.toFloat()
        )
        slideUp.interpolator = AnticipateInterpolator()
        slideUp.duration = 200L

        // Call SplashScreenViewProvider.remove at the end of your custom
        // animation.
        slideUp.doOnEnd { splashScreenViewProvider.remove() }

        // Run your animation.
        slideUp.start()
    }

    setContent {
        MyApp()
    }
}SplashScreenSnippets.kt

No início desse callback, o drawable vetorial animado na tela de apresentação é iniciado. Dependendo da duração da inicialização do app, o drawable poderá estar no meio da animação. Use SplashScreenViewProvider.iconAnimationStartMillis para saber quando a animação começou. Você pode calcular a duração restante da animação do ícone desta maneira:

// Get the duration of the animated vector drawable.
val animationDuration = splashScreenViewProvider.iconAnimationDurationMillis
// Get the start time of the animation, in milliseconds since the epoch.
val animationStart = splashScreenViewProvider.iconAnimationStartMillis
// Calculate the remaining duration of the animation.
val remainingDuration =
    (animationDuration - (System.currentTimeMillis() - animationStart))
        .coerceAtLeast(0L)SplashScreenSnippets.kt

Outros recursos

Migrar a implementação de tela de apresentação existente para o Android 12 e versões mais recentes
App Now in Android, que mostra uma implementação real de uma tela de apresentação.