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.
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.
- Na animação, o usuário desliza para retornar à tela de configurações anterior, um exemplo de animação entre atividades.
- 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.
- O usuário desliza para a direita, mostrando uma animação da redução da janela até o ícone na tela inicial.
- 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
Você pode criar animações e transições de propriedades personalizadas no app, além de animações personalizadas entre atividades e entre fragmentos com gestos de volta preditivo.
Adicionar transições personalizadas usando a API Progress
Com o AndroidX Activity 1.8.0-alpha01 ou mais recente, você pode usar as APIs Predictive Back
Progress para desenvolver animações personalizadas para
o gesto de volta preditivo no seu app. Elas são úteis para animar
visualizações, mas têm limitações na animação de transições entre fragmentos. No
OnBackPressedCallback
,
introduzimos os métodos
handleOnBackProgressed
,
handleOnBackCancelled
e
handleOnBackStarted
para animar objetos enquanto o usuário desliza para trás. Use esses métodos se
precisar personalizar mais do que as animações padrão fornecidas pelo sistema ou
as animações do componente 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.
- Use
TransitionManager#controlDelayedTransition
em vez debeginDelayedTransition
para iniciar transições quando o usuário deslizar para voltar. - Crie a transição em
handleOnBackStarted
. - Inicie a transição com o evento de retorno dentro do
handleOnBackProgressed
, relacionandocurrentFraction
aBackEvent.progress
, que expõe até que ponto o usuário deslizou para voltar. - Conclua a transição depois que o usuário confirmar o gesto de volta em
handleOnBackPressed
. - 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
, definaTransitionSeekController
como o resultado deTransitionManager.createSeekController
em vez do resultado decontrolDelayedTransition
.
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, useOVERRIDE_TRANSITION_CLOSE
. Ao especificar
OVERRIDE_TRANSITION_CLOSE
,enterAnim
é a animação de entrada da atividade A, eexitAnim
é 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 APIs atuais. Essas APIs permitem que você deslize a partir da borda da tela para manipular as transições do Animator ou do Androidx com o gesto. Se você mover o gesto além de um limite, isso determinará se ele será concluído e se você retornará ao fragmento anterior ou se ele será cancelado e você permanecerá 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 bibliotecaAndroidX Transition
. - Não há suporte para a classe
Animation
e a bibliotecaTransition
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:
- Animar o componente de navegação.
- Animar com
setCustomAnimations
. - Anime transições de entrada e saída com
setEnterTransition
,setExitTransition
,setReenterTransition
esetReturnTransition
. - Anime transições de elementos compartilhados com
setSharedElementEnterTransition
esetSharedElementReturnTransition
.
Alguns movimentos do Material Design
oferecem suporte à volta preditiva a partir da
1.12.02-alpha02
ou versões mais recentes, incluindo MaterialFadeThrough
, MaterialSharedAxis
e
MaterialFade
. MaterialContainerTransform
não oferece suporte à volta preditiva.
Usar callbacks
É possível criar uma transição entre fragmentos usando callbacks. No entanto, há uma limitação conhecida no uso de callbacks em que os usuários não podem ver o fragmento anterior ao deslizar para trás. Para criar uma transição de elemento compartilhado entre fragmentos que corresponda à orientação de design de volta preditiva, faça o seguinte:
Crie um OnBackPressedCallback
. Dentro de handleOnBackProgressed
, dimensione e
mude o fragmento. Em seguida, saia da backstack. Em seguida, execute a transição do elemento
compartilhado 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 | Nenhum |
Entre atividades | 34 | Qualquer um | VERDADEIRO | Nenhum | |
Entre tarefas | 34 | Qualquer um | VERDADEIRO | Nenhum | |
Plataforma | Personalizada entre tarefas | 34 | Qualquer um | VERDADEIRO | Nenhum |
Plataforma da API Progress | 34 | Qualquer um | VERDADEIRO | Nenhum | |
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
- Exemplos de código de retorno preditivo (link em inglês)
- Noções básicas sobre o vídeo de retorno do sistema (vídeo em inglês)
- Vídeo sobre como criar para o futuro do Android (vídeo em inglês)