Configurar a volta preditiva

Por padrão, os gestos "Voltar" preditivos e as animações do sistema estão ativados. Se o app interceptar o evento de retorno e você não tiver migrado para a volta preditiva, atualize o app para usar as APIs de navegação de retorno compatíveis.

A animação de volta preditiva à página inicial.
A animação preditiva entre atividades.
A animação preditiva entre tarefas.

Ativar animações padrão do sistema

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

  • Voltar para a página inicial: retorna o usuário à 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 em versões mais recentes. Em dispositivos com Android 13 ou 14, os usuários podem ativar essas opções em Opções do desenvolvedor.

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

Ativar a volta preditiva com a navegação do 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 Navigation Compose faz uma transição automática entre telas quando o usuário desliza para trás:

Figura 2. O crossfade padrão na animação no app SociaLite.

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

Neste exemplo, scaleOut é usado em popExitTransition para reduzir a tela de saída à medida que o usuário volta. Além disso, o parâmetro transformOrigin determina o ponto em torno do qual a animação de dimensionamento ocorre. Por padrão, é o centro da tela (0.5f, 0.5f). Você pode ajustar esse valor para fazer com que o dimensionamento se origine em outro ponto.

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.

O popEnterTransition e o popExitTransition controlam especificamente as animações ao remover a backstack, com um gesto de retorno, por exemplo. Você também pode usar enterTransition e exitTransition para definir animações de entrada e saída de elementos combináveis em geral, não apenas para o retorno preditivo. Se você definir apenas enterTransition e exitTransition, eles serão usados para navegação regular e para remover a pilha de retorno. No entanto, usar 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 na navegação Compose.

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

Suporte à volta preditiva com componentes do Material Compose

Muitos componentes da biblioteca Material Compose foram projetados para funcionar perfeitamente com gestos de volta preditiva. Para ativar as animações de volta preditiva nesses componentes, inclua a dependência Material3 mais recente (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 preditiva. ModalNavigationDrawer, ModalDrawerSheet, DismissibleDrawerSheet e DismissibleNavigationDrawer exigem que você transmita o drawerState aos elementos combináveis de conteúdo da página respectivos.

Testar a animação do gesto de volta preditivo

Se você ainda usa o Android 13 ou 14, teste a animação de volta à 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
Avançar
Acessar o progresso manualmente