Telas de apresentação

No Android 12 e versões mais recentes, a API SplashScreen permite que os apps sejam iniciados com animação, incluindo um movimento no app durante a inicialização, uma tela de apresentação mostrando o ícone do app e uma transição para o próprio app. Um SplashScreen é um Window e, portanto, cobre um Activity.

A experiência da tela de apresentação inclui elementos de design padrão a cada inicialização de app, mas também é personalizável para que seu app possa manter a marca exclusiva.

Além de usar a API da plataforma SplashScreen, você também pode usar a biblioteca de compatibilidade SplashScreen, que une a API SplashScreen.

Como a tela de apresentação funciona

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

1. O sistema mostra a tela de apresentação usando temas e todas as animações que você definir.

2. Quando o app estiver pronto, a tela de apresentação será dispensada e o app será mostrado.

A tela de apresentação nunca é exibida 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 em modo claro e escuro para 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:

Considere os elementos a seguir, 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 segundo plano da janela. Se você usar um ícone adaptativo, o segundo plano dele será exibido se houver contraste suficiente com o segundo plano 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 será usado por padrão caso o atributo não esteja 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 maneira:

• 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 de 160 dp de diâmetro.
• Ícone do app sem plano de fundo: precisa ter 288×288 dp e caber em um círculo com 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 está fora do círculo fica invisível (mascarado).

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. Adicionar um ícone animado à tela de apresentação tem apelo estético óbvio e proporciona uma experiência mais premium. Pesquisas com usuários mostram que o tempo de inicialização percebido é menor ao visualizar uma animação.

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

1. 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.

2. Tela de apresentação (mostrada durante a parte de "espera" da sequência): ela pode ser personalizada, permitindo que você forneça a animação e o branding do seu logotipo. Ele precisa atender aos requisitos descritos nesta página para funcionar corretamente.

3. Animação de saída: consiste na animação que oculta a tela de apresentação. Para personalizar, use o SplashScreenView e o ícone dele. Você pode executar qualquer animação neles, com 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, verifique se o movimento pode ser ignorado de forma confortável. A tela de apresentação só poderá ser dispensada com onResume() quando o app estiver estável do ponto de vista visual. Nenhum ícone de carregamento adicional é necessário. A introdução de 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 seguintes especificações:

• Defina apenas uma cor para o plano de fundo da janela, sem transparência. Os modos diurno e noturno têm suporte da biblioteca de compatibilidade SplashScreen.

• Confira se o ícone animado atende às especificações abaixo:

  • Formato:o ícone precisa ser um XML animateVectorDrawable (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, ou seja, quatro vezes a área de 108 dp de um ícone adaptativo não mascarado.
    • Os dois terços internos da imagem ficam visíveis no ícone na tela de início e precisam ter 288 dp, ou seja, quatro vezes os 72 dp que compõe a área interna mascarada de um ícone adaptativo.
  • Duração:recomendamos não exceder 1.000 ms em smartphones. Você pode 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 usar uma animação em loop.

• 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 como manter a tela de apresentação na tela por períodos mais longos.

Recursos da tela de apresentação

Faça o download do exemplo de kit inicial, 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 do AVD exportado final.
• 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, SplashScreen usa o windowBackground do seu tema se windowBackground é de uma única cor. Para personalizar a tela de apresentação, adicione atributos ao tema do app.

Para personalizar a tela de apresentação do app, siga um destes procedimentos:

• Defina atributos de tema para mudar a aparência.

• Deixe-o na tela por mais tempo.

• Personalize a animação para dispensar a tela de apresentação.

Começar

A biblioteca SplashScreen principal leva a tela de apresentação do Android 12 para todos os dispositivos a partir do nível 23 da API. Para adicioná-lo ao projeto, inclua o seguinte snippet no arquivo build.gradle:

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

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

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

Você pode especificar os seguintes atributos 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 e versões mais recentes.

1. Use windowSplashScreenBackground para preencher o plano de fundo com uma única cor específica:

   <item name="android:windowSplashScreenBackground">@color/...</item>
   

2. 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 animado e drawable usando AnimationDrawable e AnimatedVectorDrawable, defina windowSplashScreenAnimationDuration para reproduzir a animação enquanto mostra a janela inicial. Isso não é necessário no Android 13, porque a duração é inferida diretamente da AnimatedVectorDrawable.

   <item name="android:windowSplashScreenAnimatedIcon">@drawable/...</item>
   

3. Use windowSplashScreenAnimationDuration para indicar a duração da animação do ícone da tela de apresentação. Essa configuração não afeta o tempo real em que a tela de apresentação é mostrada, mas é possível recuperá-la ao personalizar a animação de saída da tela de apresentação usando SplashScreenView.getIconAnimationDuration. Consulte a seção a seguir sobre como manter a tela de apresentação na tela por períodos mais longos para saber mais.

   <item name="android:windowSplashScreenAnimationDuration">1000</item>
   

4. Use windowSplashScreenIconBackgroundColor para definir um plano de fundo atrás do ícone da tela de apresentação. Isso é útil se não houver contraste suficiente entre o plano de fundo da janela e o ícone.

   <item name="android:windowSplashScreenIconBackgroundColor">@color/...</item>
   

5. Você pode usar windowSplashScreenBrandingImage para definir uma imagem que será mostrada na parte de baixo da tela de apresentação. No entanto, as diretrizes de design não recomendam o uso de uma imagem de marca.

   <item name="android:windowSplashScreenBrandingImage">@drawable/...</item>
   

6. Você pode usar 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 o splashScreenStyle como SPLASH_SCREEN_STYLE_ICON ou segue 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 sempre quiser que o ícone animado seja mostrado, defina esse valor como icon_preferred.

   <item name="android:windowSplashScreenBehavior">icon_preferred</item>
   

Manter a apresentação na tela 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 o carregamento de configurações no app de um disco local de forma assíncrona, use ViewTreeObserver.OnPreDrawListener para suspender o app e desenhar o primeiro frame.

Se a atividade inicial terminar antes do desenho, por exemplo, sem definir a visualização do conteúdo e terminar antes de onResume, o listener pré-desenho não será necessário.

// Create a new event for the activity.
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // Set the layout for the content view.
    setContentView(R.layout.main_activity)

    // Set up an OnPreDrawListener to the root view.
    val content: View = findViewById(android.R.id.content)
    content.viewTreeObserver.addOnPreDrawListener(
        object : ViewTreeObserver.OnPreDrawListener {
            override fun onPreDraw(): Boolean {
                // Check whether the initial data is ready.
                return if (viewModel.isReady) {
                    // The content is ready. Start drawing.
                    content.viewTreeObserver.removeOnPreDrawListener(this)
                    true
                } else {
                    // The content isn't ready. Suspend.
                    false
                }
            }
        }
    )
}

// Create a new event for the activity.
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // Set the layout for the content view.
    setContentView(R.layout.main_activity);

    // Set up an OnPreDrawListener to the root view.
    final View content = findViewById(android.R.id.content);
    content.getViewTreeObserver().addOnPreDrawListener(
            new ViewTreeObserver.OnPreDrawListener() {
                @Override
                public boolean onPreDraw() {
                    // Check whether the initial data is ready.
                    if (mViewModel.isReady()) {
                        // The content is ready. Start drawing.
                        content.getViewTreeObserver().removeOnPreDrawListener(this);
                        return true;
                    } else {
                        // The content isn't ready. Suspend.
                        return false;
                    }
                }
            });
}

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 Activity.getSplashScreen().

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // ...

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

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

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

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // ...

    // Add a callback that's called when the splash screen is animating to the
    // app content.
    getSplashScreen().setOnExitAnimationListener(splashScreenView -> {
        final ObjectAnimator slideUp = ObjectAnimator.ofFloat(
                splashScreenView,
                View.TRANSLATION_Y,
                0f,
                -splashScreenView.getHeight()
        );
        slideUp.setInterpolator(new AnticipateInterpolator());
        slideUp.setDuration(200L);

        // Call SplashScreenView.remove at the end of your custom animation.
        slideUp.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                splashScreenView.remove();
            }
        });

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

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 SplashScreenView.getIconAnimationStart 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 = splashScreenView.iconAnimationDuration
// Get the start time of the animation.
val animationStart = splashScreenView.iconAnimationStart
// Calculate the remaining duration of the animation.
val remainingDuration = if (animationDuration != null && animationStart != null) {
    (animationDuration - Duration.between(animationStart, Instant.now()))
        .toMillis()
        .coerceAtLeast(0L)
} else {
    0L
}

// Get the duration of the animated vector drawable.
Duration animationDuration = splashScreenView.getIconAnimationDuration();
// Get the start time of the animation.
Instant animationStart = splashScreenView.getIconAnimationStart();
// Calculate the remaining duration of the animation.
long remainingDuration;
if (animationDuration != null && animationStart != null) {
    remainingDuration = animationDuration.minus(
            Duration.between(animationStart, Instant.now())
    ).toMillis();
    remainingDuration = Math.max(remainingDuration, 0L);
} else {
    remainingDuration = 0L;
}

Outros recursos

• Migrar a implementação da tela de apresentação existente para o Android 12 e versões mais recentes
• App Now in Android (link em inglês), que mostra uma implementação no mundo real de uma tela de apresentação