Shared Element Transitions

As transições de elementos compartilhados (Shared Element Transitions) permitem que componentes visuais se desloquem suavemente entre diferentes Activities ou Fragments. Em vez de uma simples troca de tela, o usuário percebe uma continuidade visual, como uma miniatura de imagem que se expande para preencher a tela de detalhes.

A implementação baseia-se na classe ActivityOptionsCompat e na definição de um nome de transição único (transitionName) para os elementos envolvidos.

// Exemplo de execução de transição entre Activities
Intent intentDetalhes = new Intent(contexto, DetalhesActivity.class);
String nomeDaTransicao = ViewCompat.getTransitionName(viewReferencia);

ActivityOptionsCompat configuracaoAnimacao = ActivityOptionsCompat.makeSceneTransitionAnimation(
    (Activity) contexto,
    viewReferencia,
    nomeDaTransicao
);

contexto.startActivity(intentDetalhes, configuracaoAnimacao.toBundle());

CollapsingToolbarLayout e AppBarLayout

Para criar interfaces modernas que reagem ao scroll do usuário, o CollapsingToolbarLayout é a ferramenta ideal. Ele funciona dentro de um CoordinatorLayout e permite que cabeçalhos se expandam ou colapsem dinamicamente.

Os principais comportamentos são controlados através de flags de rolagem e modos de colapso:

• layout_scrollFlags: Define como a View responde ao movimento da lista (ex: scroll|exitUntilCollapsed).
• layout_collapseMode: Define o efeito visual durante a transição, como pin (fixo) ou parallax (deslocamento em velocidades diferentes).

<com.google.android.material.appbar.CollapsingToolbarLayout
    android:id="@+id/toolbar_layout_dinamico"
    android:layout_width="match_parent"
    android:layout_height="250dp"
    app:layout_scrollFlags="scroll|exitUntilCollapsed"
    app:contentScrim="?attr/colorPrimary">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        app:layout_collapseMode="parallax" />

</com.google.android.material.appbar.CollapsingToolbarLayout>

Circular Reveal Animation

O efeito de revelação circular (Circular Reveal) fornece uma resposta tátil e visual elegante, geralmente utilizada ao abrir novos menus, diálogos ou alternar estados de visibilidade de um contêiner. Ele cria um círculo crescente ou decrescente que revela ou oculta uma View.

Este efeito é gerenciado pela classe ViewAnimationUtils, exigindo as coordenadas centrais e os raios inicial e final.

@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
private void executarRevelacao(View viewAlvo, int eixoX, int eixoY) {
    // Determina a hipotenusa para cobrir toda a view
    float raioFinal = (float) Math.hypot(viewAlvo.getWidth(), viewAlvo.getHeight());

    Animator reveal = ViewAnimationUtils.createCircularReveal(
        viewAlvo, 
        eixoX, 
        eixoY, 
        0f, 
        raioFinal
    );

    viewAlvo.setVisibility(View.VISIBLE);
    reveal.setDuration(500);
    reveal.start();
}

Aplicações e Benefícios

A integração dessas técnicas não apenas emebleza a interface, mas também melhora a usabilidade:

• Continuidade Contextual: O Shared Element ajuda o usuário a entender a hierarquia da navegação.
• Hierarquia Visual: O CollapsingToolbarLayout economiza espaço de tela, priorizando o conteúdo principal enquanto mantém controles acessíveis.
• Feedback Interativo: O Circular Reveal transforma ações comuns em momentos de interação fluida, aumentando o engajamento.