Configurar a volta preditiva

As animações do sistema e de volta preditiva são ativadas por padrão. Se o app interceptar o evento de retorno e você ainda não tiver migrado para a volta preditiva, atualize o app para usar as APIs de navegação de retorno compatíveis.

Animação de volta preditiva à página inicial.
Animação preditiva entre atividades.
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 retorno com suporte.

  • Voltar para a tela 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 versões mais recentes. Em dispositivos com o Android 13 ou 14, os usuários podem ativá-los nas Opções do desenvolvedor.

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

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

Figura 2. Animação padrão de transição gradual 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. Você pode usá-las para criar vários efeitos, como dimensionamento, esmaecimento ou deslizamento.

Neste exemplo, scaleOut é usado em popExitTransition para reduzir a escala vertical da tela de saída enquanto o usuário navega de 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,
)

Esse código produz o seguinte resultado:

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

popEnterTransition e popExitTransition controlam especificamente as animações ao abrir a backstack, por exemplo, com um gesto de voltar. Também é possível usar enterTransition e exitTransition para definir animações de entrada e saída de elementos que podem ser compostos 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 remover a backstack. No entanto, o uso de popEnterTransition e popExitTransition permite criar animações distintas para a navegação de retorno.

Integrar com transições de elementos compartilhados

As transições de elementos compartilhados oferecem uma conexão visual suave entre elementos que podem ser compostos com conteúdo compartilhado, geralmente usados para navegação.

Figura 4. Transição de elemento compartilhado com volta preditiva na navegação do 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 preditivos. Para ativar as 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 projeto.

Os componentes do Material Design 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 respectivos elementos de composição de conteúdo da página.

Testar a animação do gesto de volta preditivo

Se você ainda usa o Android 13 ou 14, pode testar a animação de retorno à 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 versões mais recentes, esse recurso é ativado por padrão.

Outros recursos

Anterior
Sobre a volta preditiva
Avançar
Acessar o progresso manualmente