Adicionar animações de volta preditiva

1. Antes de começar

Este codelab explica o processo de adição de animações de volta preditiva ao app SociaLite. Você vai adicionar a animação de volta à página inicial e animações padrão, além de criar uma animação personalizada no app. Por fim, vamos dar outras dicas sobre como adicionar animações de volta preditiva ao seu app.

Pré-requisitos

• Conhecimentos básicos sobre Kotlin
• Conhecimentos básicos sobre o Compose
• Ter concluído o codelab Configurar o Android Studio ou ter familiaridade com o uso do Android Studio e teste de apps em um emulador do Android 15 ou em um dispositivo físico com Android 15
• Opcional: ter concluído o codelab Mostrar conteúdo de ponta a ponta no app

O que você vai aprender neste codelab

• Como adicionar as seguintes animações de volta preditiva:
• Voltar para a tela inicial
• Animações padrão no app
• Animações personalizadas no app

O que é necessário

• Ter a versão mais recente do Android Studio.
• Ter um dispositivo de teste ou emulador com Android 15 Beta 2 ou versões mais recentes.
• Ter a navegação por gestos ativada no dispositivo de teste ou emulador.

2. Acessar o código inicial

1. Se já tiver concluído o codelab Mostrar seu app de ponta a ponta, pule para a seção Adicionar animações de volta preditiva porque você já tem o código inicial.
2. Baixe o código inicial no GitHub ou clone o repositório e confira a ramificação codelab_improve_android_experience_2024.

$ git clone git@github.com:android/socialite.git
$ cd socialite
$ git checkout codelab_improve_android_experience_2024

3. Abra o SociaLite no Android Studio e execute o app no seu dispositivo ou emulador com Android 15. Uma tela parecida com esta vai aparecer:

Este codelab precisa ser concluído depois do Mostrar seu app de ponta a ponta. Se ainda não concluiu o codelab, antes de continuar, confira se a opção de ponta a ponta está ativada no arquivo MainActivity.kt para que as animações de volta preditiva funcionem melhor.

Se não tiver chegado a esse ponto, adicione enableEdgetoEdge() antes de definir o conteúdo no arquivo MainActivity.kt. Adicionar essa linha permitir que você prossiga com o restante deste codelab, embora a interface de baixo fique obstruída pelas barras de navegação do sistema em uma conversa por chat. Para remover essa obstrução, consulte o codelab Mostrar conteúdo de ponta a ponta no app.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        ...
   // Ensure to add this line if you haven't already completed the
   // Make your app edge-to-edge codelab.
        enableEdgeToEdge()
        super.onCreate(savedInstanceState)
        setContent {... }
    }
}

Depois de ativar a opção de ponta a ponta, o SociaLite terá esta aparência:

3. Adicionar a animação de volta preditiva à página inicial

O que é volta preditiva?

A volta preditiva é um recurso da navegação por gestos que permite visualizar o resultado de um gesto de volta antes de concluí-lo totalmente. Assim, o usuário decide se quer continuar para a visualização anterior ou ficar na atual.

Adicionar suporte para esse recurso ao seu app Android pode ajudar a restabelecer a confiança do usuário e proporcionar uma experiência ainda melhor.

Como adicionar a volta preditiva

Para conferir o SociaLite sem a animação de volta preditiva à página inicial, siga estas etapas:

1. Verifique se você está na página Chats.
2. Deslize para trás para voltar à página inicial do sistema. Você vai voltar à tela inicial imediatamente sem uma prévia mostrando para onde a ação de deslizar para trás leva.

Para adicionar a animação de volta preditiva à página inicial, defina a flag android:enableOnBackInvokedCallback como true no arquivo AndroidManifest.xml.

// AndroidManifest.xml

<application
  android:name=".SocialApp"
  ...
  android:enableOnBackInvokedCallback="true">
  <activity
    android:name=".MainActivity"
    android:exported="true"
    ...>

Para saber como essa mudança de uma linha no código afeta o gesto de deslizar para trás no SocialLite, siga estas etapas:

1. Verifique se você está na página Chats.
2. Lentamente, deslize para trás para voltar à página inicial do sistema.

Uma prévia do destino anterior vai aparecer atrás da página Chats. Esta é a aparência da animação de volta preditiva à página inicial.

4. Adicionar animações no app

Animações padrão no app

Para conferir o SociaLite sem animações de volta preditiva no app, siga estas etapas:

1. Verifique se você está na página Chats.
2. Selecione uma das conversas, por exemplo, Ovelha.
3. Lentamente, deslize para trás para voltar à página Chats.

Uma animação de transição vai aparecer depois que você realizar o gesto de deslizar para trás e voltar à página Chats.

Para adicionar a volta preditiva a outras partes do SocialLite, siga estas etapas:

Atualize a dependência do Navigation Compose para androidx.navigation:navigation-compose:2.8.0-alpha07 ou versões mais recentes no arquivo libs.versions.toml.

// libs.versions.toml

[versions]
...
media3 = "1.2.0"
navigation = "2.8.0-alpha07"
...

1. Pressione a opção Sincronizar o projeto com arquivos do Gradle.
2. Execute o SociaLite novamente.
3. Verifique se você está na página Chats.
4. Selecione uma das conversas, por exemplo, Ovelha.
5. Lentamente, deslize para trás para voltar à página Chats. Ao deslizar para trás, a página Chats vai aparecer. Essa é a animação padrão no app.

Animações personalizadas no app

Para criar uma animação de volta preditiva personalizada no app, siga estas etapas:

1. Encontre o NavHost no arquivo ui/Main.kt.
2. Adicione popEnterTransition e popExitTransition para dimensionar e esmaecer as telas de entrada e saída.

// Main.kt
NavHost(
  navController = navController,
  startDestination = "home",
  popEnterTransition = {
    scaleIn(
      animationSpec = tween(
        durationMillis = 100,
        delayMillis = 35,
      ),
      initialScale = 1.1F,
     ) + fadeIn(
         animationSpec = tween(
           durationMillis = 100,
           delayMillis = 35,
         ),
     )
   },
  popExitTransition = {
     scaleOut(
       targetScale = 0.9F,
     ) + fadeOut(
         animationSpec = tween(
           durationMillis = 35,
           easing = CubicBezierEasing(0.1f, 0.1f, 0f, 1f),
         ),
     )
   },
  modifier = modifier,
)

3. Execute o SociaLite novamente.
4. Verifique se você está na página Chats.
5. Selecione uma das conversas, por exemplo, Ovelha.
6. Lentamente, deslize para trás para voltar à página Chats. Ao deslizar para trás, a tela do chat Ovelha esmaece e a página Chats é dimensionada e aparece.

A biblioteca Navigation Compose foi capaz de executar animações devido a uma migração da biblioteca Accompanist Navigation Animation para a biblioteca AndroidX. Ao aproveitar a biblioteca Navigation Compose e a compatibilidade integrada dela para volta preditiva, você adicionou gestos de volta preditivos com facilidade e melhorou a experiência no app Android.

5. Opcional: outras considerações sobre a volta preditiva

Esta é uma seção opcional de dicas que podem ser relevantes para seu app.

Não intercepte o retorno na raiz (por exemplo, MainActivity.kt)

Se o seu app intercepta o evento de retorno com BackHandler, PredictiveBackHandler, OnBackPressedCallback ou OnBackInvokedCallback na atividade raiz (por exemplo, MainActivity.kt), a animação de volta preditiva à página inicial não vai aparecer para os usuários.

Casos de uso comuns para interceptar eventos de retorno na atividade raiz incluem a geração de registros de eventos. Recomendamos registrar eventos nos métodos de ciclo de vida das bibliotecas Fragment ou Activity em vez de dentro do OnBackPressedCallback ou do OnBackInvokedCallback no caso do Views ou dentro de um addOnDestinationChangedListener no caso do Compose. Para mais informações, consulte as Práticas recomendadas de callback.

Suporte para fragmentos

Se você estiver usando o FragmentManager ou o componente de navegação, a volta preditiva estará disponível com as seguintes APIs de fragmento usando Animator, AndroidX Transitions e algumas Material Motions, como MaterialSharedAxis, MaterialFadeThrough, e MaterialFade:

• setCustomAnimations
• setEnterTransition
• setExitTransition
• setReenterTransition
• setReturnTransition
• setSharedElementEnterTransition
• setSharedElementReturnTransition

Animation e Framework Transitions não estão disponíveis.

Se o seu app estiver usando outra biblioteca de navegação, verifique a documentação dessa biblioteca para saber se ela oferece suporte a animações de volta preditiva.

Suporte para componentes de visualização do Material

Animações de volta preditiva estão disponíveis com componentes de visualização do Material (link em inglês) em dispositivos com Android 14 e versões mais recentes quando a flag do manifesto android:enableOnBackInvokedCallback está ativada e compileSDK está no nível 34 ou mais recente da API. Os componentes da visualização do Material disponíveis incluem barra de pesquisa, página inferior, página lateral e gaveta de navegação.

Compatibilidade com componentes de composição do Material

As animações de volta preditiva funcionam com os componentes de composição do Material. Eles incluem:

• SearchBar
• ModalBottomSheet
• ModalNavigationDrawer/DismissibleNavigationDrawer

Confira se você está usando a dependência androidx.compose.material3:material3-*:1.3.0-alpha01 ou mais recente. Os componentes SearchBar e a ModalBottomSheet são animados automaticamente para a volta preditiva quando a flag de manifesto android:enableOnBackInvokedCallback está ativada. ModalNavigationDrawer/DismissibleNavigationDrawer exige a transmissão do drawerState para os respectivos elementos combináveis de conteúdo de página.

Compose compatível com transições de elementos compartilhados

É ncessário usar a dependência navigation-compose 2.8.0-alpha06 ou versões mais recentes e adicionar a flag android:enableOnBackInvokedCallback="true" ao arquivo AndroidManifest.xml para usar a volta preditiva.

6. Acessar o código da solução

O arquivo AndroidManifest.xml vai ficar assim:

// AndroidManifest.xml

<application
  android:name=".SocialApp"
  ...
  android:enableOnBackInvokedCallback="true">
  <activity
    android:name=".MainActivity"
    android:exported="true"
    ...>

O NavHost no arquivo ui/Main.kt ficará assim:

// Main.kt
NavHost(
  navController = navController,
  startDestination = "home",
  popEnterTransition = {
    scaleIn(
      animationSpec = tween(
        durationMillis = 100,
        delayMillis = 35,
      ),
      initialScale = 1.1F,
     ) + fadeIn(
         animationSpec = tween(
           durationMillis = 100,
           delayMillis = 35,
         ),
     )
   },
  popExitTransition = {
     scaleOut(
       targetScale = 0.9F,
     ) + fadeOut(
         animationSpec = tween(
           durationMillis = 35,
           easing = CubicBezierEasing(0.1f, 0.1f, 0f, 1f),
         ),
     )
   },
  modifier = modifier,
)

E o arquivo libs.versions.toml ficará assim:

// libs.versions.toml

[versions]
...
media3 = "1.2.0"
navigation = "2.8.0-alpha07"
...

O código de solução está disponível na ramificação main.

Para acessar o código da solução, siga estas etapas:

1. Se você já baixou o SocialLite, execute este comando:

git checkout main

2. Se você não baixou o SocialLite, faça o download do código novamente para visualizar a ramificação main:

git clone git@github.com:android/socialite.git

7. Saiba mais

Documentação do desenvolvedor Android

• Adicionar o gesto de volta preditivo
• Elementos compartilhados com o Navigation Compose

Codelab

• Atualizar o app para usar o gesto de volta preditivo