Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Exemplos do MotionLayout

Este documento contém exemplos de como usar o MotionLayout. Cada exemplo inclui um vídeo demonstrando o movimento, além do código correspondente para a cena e layouts.

Movimento básico

Este exemplo contém uma única visualização que você pode tocar e arrastar para mover horizontalmente.

Confira o XML do layout.
Confira o XML MotionScene.

Figura 1. Arrastar uma visualização.

Atributo personalizado: backgroundColor

Este exemplo é semelhante ao Movimento básico. Além do movimento básico, a cor de fundo muda à medida que a visualização se move.

Confira o XML de layout.
Confira o XML MotionScene.

Figura 2. Arrastar uma visualização enquanto a cor de fundo dela muda.

ImageFilterView: transição de imagens

Este exemplo mostra como fazer a transição do valor de saturação de uma ImageFilterView.

Confira o XML do layout.
Confira o XML MotionScene.

Figura 3. Arrastar uma imagem enquanto a saturação dela muda.

Posição de frames-chave

Este exemplo usa <KeyFrameSet> para alterar a posição Y da visualização durante o movimento.

Confira o XML de layout.
Confira o XML MotionScene.

Figura 4. Arrastando uma visualização e alterando a posição Y dela.

Interpolação de frames-chave

Este exemplo é criado na Posição do frame-chave, adicionando rotação e dimensionamento à transição da visualização.

Confira o XML do layout.
Confira o XML MotionScene.

Figura 5. Arrastar uma visualização e alterar a posição Y, a rotação e a escala dela.

Ciclo de frames-chave

Este exemplo inclui elementos <KeyCycle> para adicionar movimento de onda à visualização.

Confira o XML de layout.
Confira o XML MotionScene.

Figura 6. Arrastar uma visualização com um movimento ondulado enquanto altera a cor dela.

CoordinatorLayout (1/2)

Este exemplo adiciona um MotionLayout a um AppBarLayout já existente para adicionar movimento à barra de apps. Este exemplo é descrito em Introdução ao MotionLayout (parte III) (link em inglês).

Confira o XML do layout.
Confira o XML MotionScene.

Figura 7. Rolagem do conteúdo enquanto a barra de app se expande.

CoordinatorLayout (2/2)

Este exemplo adiciona um MotionLayout a um AppBarLayout já existente para adicionar movimento à barra de apps.

Confira o XML de layout.
Confira o XML MotionScene.

Figura 8. Rolagem do conteúdo enquanto a barra de apps se expande e o texto entra e sai da barra de apps.

DrawerLayout (1/2)

Este exemplo mostra como adicionar movimento a um DrawerLayout. Este exemplo é descrito em Introdução ao MotionLayout (parte III) (link em inglês).

Confira o XML do layout.
Confira o XML MotionScene.

Figura 9. Expandindo `DrawerLayout`.

DrawerLayout (2/2)

Este exemplo mostra como adicionar movimento a um DrawerLayout.

Confira o XML do layout.
Confira o XML MotionScene do conteúdo principal.
Confira o XML MotionScene do menu.

Figura 10. Como expandir `DrawerLayout` com texto de menu animado.

Painel lateral

Este exemplo mostra como exibir um painel lateral ao arrastar a área de conteúdo principal para a direita.

Confira o XML do layout.
Confira o XML MotionScene.

Figura 11. Mostrando um painel lateral ao arrastar o conteúdo principal.

Paralaxe

Este exemplo demonstra um segundo plano paralaxe, em que diferentes camadas se movem em velocidades diferentes.

Confira o XML do layout.
Confira o XML MotionScene.

Figura 12. Efeito paralaxe na imagem do cabeçalho.

ViewPager

Este exemplo mostra como adicionar movimento ao deslizar entre guias ViewPager. Este exemplo é descrito em Introdução ao MotionLayout (parte III) (link em inglês).