Adicionar suporte a animações de volta preditiva

Ao usar as APIs de retorno do sistema, você pode ativar o recebimento de animações no app e o suporte a transições personalizadas.

Vídeo: animações de volta preditiva

Depois que o recurso é ativado, seu app exibe animações de volta à tela inicial entre atividades e tarefas.

Você também pode atualizar a dependência do componente do Material Design para a v1.10.0 do MDC Android para receber animações de componentes do Material Design, como estas:

Consulte as orientações para desenvolvedores de componentes do Material Design no GitHub (link em inglês) para mais informações.

O vídeo mostra um breve exemplo de animações de volta preditiva entre atividades e de volta à tela inicial usando o app Configurações do Android.

  1. Na animação, o usuário desliza para retornar à tela de configurações anterior, um exemplo de animação entre atividades.
  2. Nessa tela, o usuário começa a deslizar para voltar uma segunda vez, mostrando uma prévia da tela inicial com o plano de fundo, que é um exemplo da animação de retorno à tela inicial.
  3. O usuário desliza para a direita, mostrando uma animação da redução da janela até o ícone na tela inicial.
  4. O usuário retornou totalmente para a tela inicial.

Saiba mais sobre como Adicionar suporte a gestos de volta preditivo.

Adicionar animações e transições personalizadas no app

É possível criar animações e transições de propriedades personalizadas no aplicativo, entre atividades e animações personalizadas entre fragmentos com recursos gestos de retorno.

Adicionar transições personalizadas usando a API Progress

Com o AndroidX Activity 1.8.0-alpha01 ou mais recente, você pode usar a volta preditiva APIs Progress para desenvolver animações personalizadas para o gesto de volta preditivo no app. As APIs Progress são úteis para animar visualizações, mas têm limitações ao animar transições entre fragmentos. Dentro de OnBackPressedCallback apresentamos a handleOnBackProgressed, handleOnBackCancelled e handleOnBackStarted para animar objetos enquanto o usuário desliza para trás. Use esses métodos se você precise personalizar mais do que as animações padrão fornecidas pelo sistema; ou as animações dos componentes do Material Design.

É esperado que a maioria dos apps use as APIs do AndroidX compatíveis com versões anteriores, mas também há APIs de plataformas semelhantes na interface OnBackAnimationCallback disponíveis para teste na prévia para desenvolvedores 1 do Android 14. e versões mais recentes.

Usar as APIs Progress com transições do AndroidX

As APIs Progress podem ser usadas com o AndroidX Transitions 1.5.0-alpha01 ou mais recente no Android 14 e versões mais recentes para criar transições de volta preditiva.

  1. Use TransitionManager#controlDelayedTransition em vez de beginDelayedTransition para iniciar transições quando o usuário deslizar para voltar.
  2. Crie a transição em handleOnBackStarted.
  3. Inicie a transição com o evento de retorno dentro do handleOnBackProgressed, relacionando currentFraction a BackEvent.progress, que expõe até que ponto o usuário deslizou para voltar.
  4. Conclua a transição depois que o usuário confirmar o gesto de volta em handleOnBackPressed.
  5. Por fim, redefina o estado da transição dentro de handleOnBackCancelled.

O vídeo, o código Kotlin e o XML a seguir demonstram uma transição personalizada entre duas caixas implementadas com OnBackPressedCallback:

    class MyFragment : Fragment() {

    val transitionSet = TransitionSet().apply {
        addTransition(Fade(Fade.MODE_OUT))
        addTransition(ChangeBounds())
        addTransition(Fade(Fade.MODE_IN))
    }
    ...
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        val callback = object : OnBackPressedCallback(enabled = false) {

            var controller: TransitionSeekController? = null

            @RequiresApi(34)
            override fun handleOnBackStarted(backEvent: BackEvent) {
                // Create the transition
                controller = TransitionManager.controlDelayedTransition(
                    binding.card,
                    transitionSet
                )
                changeTextVisibility(ShowText.SHORT)
            }

            @RequiresApi(34)
            override fun handleOnBackProgressed(backEvent: BackEvent) {
                // Play the transition as the user swipes back
                if (controller?.isReady == true) {
                    controller?.currentFraction = backEvent.progress
                }
            }

            override fun handleOnBackPressed() {
                // Finish playing the transition when the user commits back
                controller?.animateToEnd()
                this.isEnabled = false
            }

            @RequiresApi(34)
            override fun handleOnBackCancelled() {
                // If the user cancels the back gesture, reset the state
                transition(ShowText.LONG)
            }
        }

        binding.shortText.setOnClickListener {
            transition(ShowText.LONG)
            callback.isEnabled = true
        }

        this.requireActivity().onBackPressedDispatcher.addCallback(callback)
    }

    private fun transition(showText: ShowText) {
        TransitionManager.beginDelayedTransition(
            binding.card,
            transitionSet
        )
        changeTextVisibility(showText)
    }

    enum class ShowText { SHORT, LONG }
    private fun changeTextVisibility(showText: ShowText) {
        when (showText) {
            ShowText.SHORT -> {
                binding.shortText.isVisible = true
                binding.longText.isVisible = false
            }
            ShowText.LONG -> {
                binding.shortText.isVisible = false
                binding.longText.isVisible = true
            }
        }
    }
}
  
<?xml version="1.0" encoding="utf-8"?>
...
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/card"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        ...>

        <TextView
            android:id="@+id/short_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            ... />

        <TextView
            android:id="@+id/long_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="gone"
            .../>

    </androidx.constraintlayout.widget.ConstraintLayout>

Ao trabalhar com transições de volta preditiva, considere o seguinte:

  • Use isSeekingSupported para verificar se a transição tem suporte à volta preditiva.
  • Substitua isSeekingSupported para retornar o valor "true" para suas transições personalizadas.
  • Crie um controle por animação.
  • As transições de volta preditiva têm suporte das transições do AndroidX, mas não das de framework. Recomendamos migrar das transições de framework.
  • As transições de volta preditiva podem ser usadas em dispositivos com Android 14 e versões mais recentes e não são compatíveis com versões anteriores.
  • Também há suporte a transições criadas com cenas XML. Em handleOnBackStarted, defina TransitionSeekController como o resultado de TransitionManager.createSeekController em vez do resultado de controlDelayedTransition.

Adicionar transições de atividades personalizadas no Android 14 e versões mais recentes

Para garantir que as transições de atividades personalizadas ofereçam suporte à volta preditiva no Android 14 e versões mais recentes, você pode usar overrideActivityTransition em vez de overridePendingTransition. Isso significa que a animação de transição é reproduzida quando o usuário desliza para trás.

Um exemplo de como isso pode funcionar é um cenário em que a atividade B está acima da atividade A na backstack. Você gerenciaria animações de atividades personalizadas da seguinte maneira:

  • Chame transições de abertura ou fechamento no método onCreate da atividade B.
  • Quando o usuário navegar para a atividade B, use OVERRIDE_TRANSITION_OPEN. Quando o usuário deslizar para voltar à atividade A, use OVERRIDE_TRANSITION_CLOSE.

  • Ao especificar OVERRIDE_TRANSITION_CLOSE, enterAnim é a animação de entrada da atividade A, e exitAnim é a animação de saída da atividade B.

Adicionar suporte à volta preditiva com fragmentos

Ao implementar a volta preditiva com fragmentos, há duas abordagens.

Usar APIs existentes

Recomendamos que você use as APIs atuais. Essas APIs permitem deslizar da borda da tela para manipular suas transições do Animator ou do Androidx com o gesto. Mover o gesto além de um limite determina se ele é concluído e você retornar ao fragmento anterior, ou ele será cancelado e você permanecem no fragmento atual. Para mais informações, consulte Usar animações para navegar entre fragmentos.

Considere os seguintes fatores:

  • Importe Transitions 1.5.0 ou uma versão mais recente e Fragments 1.7.0 ou uma versão mais recente. Grande parte do suporte à volta preditiva em fragmentos depende de Transitions poder buscar animações, o que só é possível na Transitions 1.5.0 ou uma versão mais recente.
  • Use fragmentos com FragmentManager ou o componente Navigation para processar a backstack. Não há suporte à volta preditiva quando você gerencia sua própria backstack.
  • Algumas bibliotecas incluem suporte à volta preditiva. Verifique a documentação para ter certeza.
  • Há suporte para a classe Animator e a biblioteca AndroidX Transition.
  • Não há suporte para a classe Animation e a biblioteca Transition do framework.
  • As animações preditivas só funcionam em dispositivos com o Android 14 ou versões mais recentes.

Use fragmentos cruzados de volta preditiva nas seguintes situações:

Alguns movimentos do material oferecer suporte à volta preditiva a partir de 1.12.02-alpha02 ou superior, incluindo MaterialFadeThrough, MaterialSharedAxis e MaterialFade. MaterialContainerTransform não é compatível com previsão

Usar callbacks

Você pode criar uma transição entre fragmentos usando callbacks, mas há uma limitação conhecida ao usar callbacks em que os usuários não podem ver a versão ao deslizar para trás. Criar uma transição de elementos compartilhados entre fragmentos que corresponde à volta preditiva orientações de design, façam seguinte:

Crie um OnBackPressedCallback. Dentro do handleOnBackProgressed, dimensione e e deslocar o fragmento. Em seguida, saia da backstack. Em seguida, execute o elemento compartilhado a transição usando setSharedElementReturnTransition fora do callback.

Para saber mais, consulte o exemplo de código (link em inglês) no GitHub.

Requisitos

Use as tabelas abaixo para entender o que é controlado pelas opções do desenvolvedor, por targetSdkVersion e compileSdkVersion, pela versão do dispositivo, pelas dependências, flags de manifesto e flags de fragmento. A primeira tabela se refere aos requisitos de código.

Categoria Animação compileSdk targetSdk android:enableOnBackInvokedCallback Dependência
Animações do sistema Voltar para a tela inicial 33 Qualquer um VERDADEIRO Nenhuma
Entre atividades 34 Qualquer um VERDADEIRO Nenhuma
Entre tarefas 34 Qualquer um VERDADEIRO Nenhuma
Plataforma Personalizada entre tarefas 34 Qualquer um VERDADEIRO Nenhuma
Plataforma da API Progress 34 Qualquer um VERDADEIRO Nenhuma
Componentes do Material Página inferior 34 Qualquer um VERDADEIRO Material Component 1.10.0
Página lateral 34 Qualquer um VERDADEIRO Material Component 1.10.0
Gaveta de navegação 34 Qualquer um VERDADEIRO Material Component 1.10.0
Pesquisar 34 Qualquer um VERDADEIRO Material Component 1.10.0
Animações do Jetpack Personalizada entre fragmentos do AndroidX 34 Qualquer um VERDADEIRO AndroidX Fragment 1.7
Transições personalizadas do AndroidX 34 Qualquer um VERDADEIRO AndroidX Transition 1.5
API Progress do Jetpack 34 Qualquer um VERDADEIRO AndroidX Activity 1.8

A tabela abaixo faz referência aos requisitos que permitem mostrar animações aos usuários.

Categoria Animação Opção do desenvolvedor ativada Versão do dispositivo
Animações do sistema Voltar para a tela inicial VERDADEIRO 33
Entre atividades VERDADEIRO 34
Entre tarefas VERDADEIRO 34
Plataforma Personalizada entre tarefas VERDADEIRO 34
Plataforma da API Progress FALSO 34
Componentes do Material Página inferior FALSO 34
Página lateral FALSO 34
Gaveta de navegação FALSO 34
Pesquisar FALSO 34
Animações do Jetpack Personalizada entre fragmentos do AndroidX FALSO 34
Transições personalizadas do AndroidX FALSO 34
API Progress do Jetpack FALSO 34

Outros recursos