Este documento contém exemplos de como usar o
MotionLayout.
Cada exemplo inclui um vídeo demonstrando o movimento, com o código
correspondente para a cena e os layouts do movimento.
Movimento básico
Este exemplo contém uma única visualização que você pode tocar e arrastar para mover na horizontal.
- Confira o XML do layout.
- Confira o XML do
MotionScene.
Atributo personalizado: backgroundColor
Este exemplo é semelhante ao Movimento básico. Além do movimento básico, a cor do plano de fundo muda conforme a visualização se move.
- Confira o XML do layout.
- Confira o XML do
MotionScene.
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 do
MotionScene.
Posição de frames-chave
Esse exemplo usa <KeyFrameSet> para mudar a posição Y da visualização durante
o movimento.
- Confira o XML do layout.
- Confira o XML do
MotionScene.
Interpolação de frames-chave
Este exemplo se baseia no exemplo de Posição do frame-chave, adicionando rotação e dimensionamento à transição de visualização.
- Confira o XML do layout.
- Confira o XML do
MotionScene.
Ciclo de frames-chave
Este exemplo inclui elementos <KeyCycle> para adicionar movimento de onda à visualização.
- Confira o XML do layout.
- Confira o XML do
MotionScene.
CoordinatorLayout (1/2)
Este exemplo adiciona um MotionLayout a uma 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 do
MotionScene.
CoordinatorLayout (2/2)
Este exemplo adiciona um MotionLayout a uma AppBarLayout já existente para adicionar movimento
à barra de apps.
- Confira o XML do layout.
- Confira o XML do
MotionScene.
DrawerLayout (1/2)
Este exemplo mostra como adicionar movimento a um DrawerLayout. Este exemplo é
descrito com mais detalhes em
Introdução ao MotionLayout (parte III) (link em inglês).
- Confira o XML do layout.
- Confira o XML do
MotionScene.
DrawerLayout (2/2)
Este exemplo mostra como adicionar movimento a um DrawerLayout.
- Confira o XML do layout.
- Confira o XML do
MotionScenepara o conteúdo principal. - Confira o XML do
MotionScenepara o menu.
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 do
MotionScene.
Paralaxe
Esse exemplo demonstra um plano de fundo com efeito paralaxe, em que diferentes camadas de segundo plano se movem em velocidades distintas.
- Confira o XML do layout.
- Confira o XML do
MotionScene.
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).
- Confira o XML do layout.
- Confira o XML do
MotionScene.
ViewPager: Lottie
Este exemplo mostra como adicionar movimento ao deslizar entre guias ViewPager.
- Confira o XML do layout.
- Confira o XML do
MotionScene.
Movimento complexo (1/3)
Este exemplo combina elementos de exemplos anteriores para demonstrar movimentos complexos.
- Confira o XML do layout.
- Confira o XML do
MotionScene.
Movimento complexo (2/3)
Este exemplo combina elementos de exemplos anteriores para demonstrar movimentos complexos.
- Confira o XML do layout.
- Confira o XML do
MotionScene.
Movimento complexo (3/3)
Este exemplo combina elementos de exemplos anteriores para demonstrar movimentos complexos.
- Confira o XML do layout.
- Confira o XML do
MotionScene.
Transição de fragmentos (1/2)
Este exemplo mostra como usar o MotionLayout para fazer a transição entre
fragmentos.
- Confira o XML do layout.
- Confira o XML do
MotionScene.
Transição de fragmentos (2/2)
Este exemplo mostra como usar o MotionLayout para fazer a transição entre
fragmentos.
- Confira o XML do layout.
- Confira o XML do
MotionScene.
Movimento parecido com o YouTube
Este exemplo demonstra a transição entre uma visualização compacta e uma experiência em tela cheia com conteúdo extra.
- Confira o XML do layout.
- Confira o XML do
MotionScene.
KeyTrigger
Este exemplo demonstra como mostrar e ocultar um botão de ação flutuante quando a transição ultrapassa um limite de progresso.
- Confira o XML do layout.
- Confira o XML do
MotionScene.
Estado múltiplo
Este exemplo mostra como usar o estado para determinar qual movimento aplicar.
- Confira o XML do layout.
- Confira o XML do
MotionScene.