Iniciar uma atividade usando uma animação

As transições de atividades em apps do Material Design fornecem conexões visuais entre diferentes estados por meio de movimentos e transformações entre elementos comuns. Você pode especificar animações personalizadas para transições de entrada e saída e para transições de elementos compartilhados entre atividades.

Figura 1. Uma transição com elementos compartilhados.

  • Uma transição de entrada determina como as visualizações em uma atividade entram em cena. Por exemplo, na transição de entrada explode, as visualizações entram em cena por fora e voam para o centro da tela.
  • Uma transição de saída determina como as visualizações em uma atividade saem de cena. Por exemplo, na transição de saída explode, as visualizações saem de cena a partir do centro.
  • Uma transição de elementos compartilhados determina como as visualizações compartilhadas entre duas atividades fazem a transição entre essas atividades. Por exemplo, se duas atividades têm a mesma imagem em posições e tamanhos diferentes, a transição de elemento compartilhado changeImageTransform converte e escalona a imagem suavemente entre essas atividades.

O Android é compatível com estas transições de entrada e saída:

  • explode: move as visualizações para dentro ou para fora a partir do centro da cena.
  • slide: move as visualizações para dentro ou para fora de uma das bordas da cena.
  • fade: adiciona ou remove uma visualização do cenário mudando a opacidade dela.

Qualquer transição que amplie a classe Visibility é compatível com uma transição de entrada ou saída. Para mais informações, consulte a referência da API para a classe Transition.

O Android também é compatível com estas transições de elementos compartilhados:

  • changeBounds: anima as mudanças nos limites de layout das visualizações de destino.
  • changeClipBounds: anima as mudanças nos limites de corte das visualizações de destino.
  • changeTransform: anima as mudanças de escala e rotação das visualizações de destino.
  • changeImageTransform: anima as mudanças de tamanho e escala das imagens de destino.

Quando você ativa as transições de atividade no seu app, a transição de esmaecimento cruzado padrão é ativada entre as atividades de entrada e saída.

Figura 2. Uma transição de cena com um elemento compartilhado.

Para ver um exemplo de código que anima entre atividades usando elementos compartilhados, consulte ActivitySceneTransitionBasic.

Verificar a versão do sistema

As APIs de transição de atividade estão disponíveis no Android 5.0 (API 21) e versões posteriores. Para preservar a compatibilidade com versões anteriores do Android, verifique o version do sistema durante a execução antes de invocar as APIs para qualquer um destes recursos:

Kotlin

// Check if we're running on Android 5.0 or higher
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Apply activity transition
} else {
    // Swap without transition
}

Java

// Check if we're running on Android 5.0 or higher
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Apply activity transition
} else {
    // Swap without transition
}

Especificar transições personalizadas

Primeiro, ative as transições de conteúdo da janela com o atributo android:windowActivityTransitions ao definir um estilo herdado do tema do Material Design. Você também pode especificar transições de entrada, saída e elemento compartilhado na definição de estilo:

<style name="BaseAppTheme" parent="android:Theme.Material">
  <!-- enable window content transitions -->
  <item name="android:windowActivityTransitions">true</item>

  <!-- specify enter and exit transitions -->
  <item name="android:windowEnterTransition">@transition/explode</item>
  <item name="android:windowExitTransition">@transition/explode</item>

  <!-- specify shared element transitions -->
  <item name="android:windowSharedElementEnterTransition">
    @transition/change_image_transform</item>
  <item name="android:windowSharedElementExitTransition">
    @transition/change_image_transform</item>
</style>

A transição change_image_transform desse exemplo é definida da seguinte maneira:

<!-- res/transition/change_image_transform.xml -->
<!-- (see also Shared Transitions below) -->
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
  <changeImageTransform/>
</transitionSet>

O elemento changeImageTransform corresponde à classe ChangeImageTransform. Para mais informações, consulte a Referência da API para Transition.

Para ativar transições de conteúdo da janela no código, chame a função Window.requestFeature():

Kotlin

// Inside your activity (if you did not enable transitions in your theme)
with(window) {
    requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS)

    // Set an exit transition
    exitTransition = Explode()
}

Java

// Inside your activity (if you did not enable transitions in your theme)
getWindow().requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS);

// Set an exit transition
getWindow().setExitTransition(new Explode());

Para especificar transições no código, chame as funções a seguir com um objeto Transition:

As funções setExitTransition() e setSharedElementExitTransition() definem a transição de saída para a atividade de chamada. As funções setEnterTransition() e setSharedElementEnterTransition() definem a transição de entrada para a atividade que recebe a chamada.

Para ter o efeito completo de uma transição, é necessário ativar as transições de conteúdo da janela nas atividades de chamada e na chamada. Caso contrário, a atividade de chamada inicia a transição de saída, mas você vê as transições da janela, como escala ou esmaecimento.

Para iniciar uma transição de entrada o mais rápido possível, use a função Window.setAllowEnterTransitionOverlap() na atividade chamada. Isso faz com que haja transições de entrada mais dramáticas.

Iniciar uma atividade usando transições

Se você ativar as transições e definir uma transição de saída para uma atividade, ela será ativada ao iniciar outra atividade, como mostrado a seguir:

Kotlin

startActivity(intent,
              ActivityOptions.makeSceneTransitionAnimation(this).toBundle())

Java

startActivity(intent,
              ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

Se você definir uma transição de entrada para a segunda atividade, essa transição também será ativada quando a atividade for iniciada. Para desativar as transições ao iniciar outra atividade, forneça um pacote de opções null.

Iniciar uma atividade com um elemento compartilhado

Para criar uma animação de transição de tela entre duas atividades que têm um elemento compartilhado, faça o seguinte:

  1. Ative transições de conteúdo da janela no tema.
  2. Especifique uma transição de elementos compartilhados no estilo.
  3. Defina a transição como um recurso XML.
  4. Atribua um nome comum aos elementos compartilhados em ambos os layouts com o atributo android:transitionName.
  5. Use a função ActivityOptions.makeSceneTransitionAnimation().

Kotlin

// Get the element that receives the click event
val imgContainerView = findViewById<View>(R.id.img_container)

// Get the common element for the transition in this activity
val androidRobotView = findViewById<View>(R.id.image_small)

// Define a click listener
imgContainerView.setOnClickListener( {
    val intent = Intent(this, Activity2::class.java)
    // Create the transition animation - the images in the layouts
    // of both activities are defined with android:transitionName="robot"
    val options = ActivityOptions
            .makeSceneTransitionAnimation(this, androidRobotView, "robot")
    // Start the new activity
    startActivity(intent, options.toBundle())
})

Java

// Get the element that receives the click event
final View imgContainerView = findViewById(R.id.img_container);

// Get the common element for the transition in this activity
final View androidRobotView = findViewById(R.id.image_small);

// Define a click listener
imgContainerView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Intent intent = new Intent(this, Activity2.class);
        // Create the transition animation - the images in the layouts
        // of both activities are defined with android:transitionName="robot"
        ActivityOptions options = ActivityOptions
            .makeSceneTransitionAnimation(this, androidRobotView, "robot");
        // Start the new activity
        startActivity(intent, options.toBundle());
    }
});

Para visualizações dinâmicas compartilhadas geradas no código, use a função View.setTransitionName() para especificar um nome de elemento comum em ambas as atividades.

Para reverter a animação de transição de cena ao finalizar a segunda atividade, chame a função Activity.finishAfterTransition() em vez de Activity.finish().

Iniciar uma atividade com diversos elementos compartilhados

Para criar uma animação de transição de cena entre duas atividades que tenham mais de um elemento compartilhado, defina os elementos compartilhados em ambos os layouts com o atributo android:transitionName ou use a função View.setTransitionName() nas duas atividades e crie um objeto ActivityOptions desta forma:

Kotlin

// Rename the Pair class from the Android framework to avoid a name clash
import android.util.Pair as UtilPair
...
val options = ActivityOptions.makeSceneTransitionAnimation(this,
        UtilPair.create(view1, "agreedName1"),
        UtilPair.create(view2, "agreedName2"))

Java

ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
        Pair.create(view1, "agreedName1"),
        Pair.create(view2, "agreedName2"));