Configurar a volta preditiva

Para ativar as animações de volta preditiva, você precisa ativar o gesto de volta preditivo. Para ativar, adicione android:enableOnBackInvokedCallback="true à tag <application> ou às tags <activity> individuais no arquivo AndroidManifest.xml.

Ativar animações padrão do sistema

As animações de volta à tela inicial, entre atividades e tarefas estão disponíveis no Android 15 e em versões mais recentes para apps que migraram para as APIs de processamento de volta com suporte.

  • Voltar para a tela inicial: retorna o usuário para a tela inicial.
  • Entre atividades: transições entre atividades no app.
  • Entre tarefas: transições entre tarefas.

Essas animações são ativadas por padrão no Android 15 e versões mais recentes. Em dispositivos com o Android 13 ou 14, os usuários podem ativar essas opções nas Opções do desenvolvedor.

Para receber as animações do sistema, atualize a dependência Activity do AndroidX para 1.6.0 ou mais recente.

Ativar a volta preditiva com a Navigation Compose

Para usar a volta preditiva no Navigation Compose, verifique se você está usando a biblioteca navigation-compose 2.8.0 ou mais recente.

O Compose de navegação faz transições entre telas automaticamente quando o usuário desliza para voltar:

Figura 2. A animação de crossfade padrão no app SociaLite.

Ao navegar, é possível criar transições personalizadas com popEnterTransition e popExitTransition. Quando aplicados ao NavHost, esses modificadores permitem definir como as telas de entrada e saída são animadas. Eles podem ser usados para criar vários efeitos, como dimensionamento, desvanecimento ou deslizamento.

Neste exemplo, scaleOut é usado em popExitTransition para reduzir a tela de saída quando o usuário navega de volta. Além disso, o parâmetro transformOrigin determina o ponto em torno do qual a animação de escalonamento ocorre. Por padrão, é o centro da tela (0.5f, 0.5f). É possível ajustar esse valor para que a escalação se origine de um ponto diferente.

NavHost(
    navController = navController,
    startDestination = Home,
    popExitTransition = {
        scaleOut(
            targetScale = 0.9f,
            transformOrigin = TransformOrigin(pivotFractionX = 0.5f, pivotFractionY = 0.5f)
        )
    },
    popEnterTransition = {
        EnterTransition.None
    },
    modifier = modifier,
)
PredictiveBackSnippets.kt

Esse código produz o seguinte resultado:

Figura 3. Uma animação personalizada no app SociaLite.

popEnterTransition e popExitTransition controlam especificamente animações ao abrir a backstack, com um gesto de volta, por exemplo. Também é possível usar enterTransition e exitTransition para definir animações para entrar e sair de elementos combináveis em geral, não apenas para a volta preditiva. Se você definir apenas enterTransition e exitTransition, eles serão usados para a navegação normal e para abrir a backstack. No entanto, o uso de popEnterTransition e popExitTransition permite criar animações distintas para a navegação de volta.

Integrar com transições de elementos compartilhados

As transições de elementos compartilhados fornecem uma conexão visual suave entre combináveis com conteúdo compartilhado, geralmente usados para navegação.

Figura 4. Transição de elemento compartilhado com volta preditiva no Navigation Compose.

Para usar elementos compartilhados com o Navigation Compose, consulte Voltar preditiva com elementos compartilhados.

Suporte à volta preditiva com componentes do Material Compose

Muitos componentes na biblioteca do Material Compose foram projetados para funcionar perfeitamente com gestos de volta preditiva. Para ativar animações de volta preditiva nesses componentes, inclua a dependência mais recente do Material3 (androidx.compose.material3:material3-*:1.3.0 ou mais recente) no seu projeto.

Os componentes do Material que oferecem suporte a animações de volta preditiva incluem:

SearchBar e ModalBottomSheet são animados automaticamente com gestos de volta preditivos. ModalNavigationDrawer, ModalDrawerSheet, DismissibleDrawerSheet e DismissibleNavigationDrawer exigem que você transmita o drawerState para os elementos combináveis de conteúdo da respectiva página.

Testar a animação do gesto de volta preditivo

Se você ainda usa o Android 13 ou o Android 14, teste a animação de volta para a tela inicial.

Para testar a animação, siga estas etapas:

  1. No dispositivo, acesse Configurações > Sistema > Opções do desenvolvedor.
  2. Selecione Animações de gestos "Voltar" preditivos.
  3. Inicie o app atualizado e use o gesto "Voltar" para testar o recurso.

No Android 15 e mais recentes, esse recurso é ativado por padrão.

Outros recursos

Anterior
Sobre a volta preditiva
Próxima
Acessar o progresso manualmente