Animações no Android com Motion Editor!

This talk was held during an online edition of the Android Curitiba meetup of GDG Salvador, that happened on June 9th.

The talk was about what's new Motion Editor, available on Android Studio 4.0 and recently launched. The talk discussed the concept behind MotionLayout, how you can create one and edit it using Motion Editor. Them, we moved through the basic features of it, such as MotionLayout visualization, ConstraintSet configurations, setup of Transitions, KeyFrames and KeyFrameSets.

Lastly, we've created our own MotionLayout, edited it using Motion Editor and got some other complex examples of elaborated usages of Motion Editor for animations using a Google sample.

The content is in portuguese (pt-BR).

More info: https://www.meetup.com/pt-BR/Android-Curitiba/events/271043133/
Video: https://www.youtube.com/watch?v=mTqFtdDAOD4

Transcript

1. Animações no Android com Motion Editor! Conhecendo essa nova ferramenta do Android Studio 4.0! ✨ Walmyr Carvalho Mobile Technical Leader @ idwall, Founder @ Kusudama Google Developer Expert, Android @walmyrcarvalho
2. Olá, pessoal! Meu nome é Walmyr Carvalho, muito prazer! :)
3. Trabalho com desenvolvimento Android há 10 anos e sou um Google Developer Experts de Android no Brasil há 4 anos. Além disso, estou muito próximo da comunidade nacional de Android, sendo organizador do Kotlin Meetup São Paulo e do Android Dev BR, a maior comunidade lusófona de Android do mundo, com mais de 6.900 pessoas! Também apoio o empreendedorismo nacional, sendo mentor de Android e mobile no Google for Startups Accelerator e na ACE Startups.
4. Já ajudei a evoluir produtos mobile para empresas como Loggi, 99, Cielo, CI&T, Hotel Urbano e Globo Esporte, durante mais de 9 anos de carreira como especialista em Android. Créditos: Google Play
5. Nesse ano fundei a Kusudama, um estúdio de desenvolvimento e design de produtos digitais para Android e iOS, que tem como seu objetivo criar experiências que tratem seus usuários com respeito dentro do universo mobile.
6. Recentemente me juntei ao grande time da idwall como Mobile Technical Leader, com o objetivo de criar a próxima plataforma de identidade digital brasileira no mobile, além de soluções para empresas que buscam aumentar a confiança na identificação dos seus usuários.
7. MotionLayout: Um jeito novo de animar no Android! ✨
8. O MotionLayout é uma subclasse do ConstraintLayout lançado em 2018 e que ajuda na construção de animações de maneira mais fácil e organizada! ❤
9. MotionLayout - Android Developers Documentação oficial do MotionLayout, com uma explicação detalhada do seu funcionamento e muitos exemplos de uso! tiny.cc/doc-motionlayout Créditos: Android Developers
10. Como eu faço para começar para utilizar o MotionLayout nos nossos projetos?!
11. build.gradle // Para utilizar o MotionLayout é necessário // fazer uso da biblioteca do ConstraintLayout dependencies { implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta6' }
12. Certo! Agora, precisamos criar um arquivo de layout do tipo MotionLayout no nosso projeto:
13. na pasta /res/layout: New > Layout Resource File
14. Feito! Após o arquivo de layout criado, você deve encontrar essa interface:
15. Créditos: Android Developers
16. Por padrão, o layout já nos trás um ConstraintSet inicial (start), um final (end) e uma Transition por padrão:
17. Créditos: Android Developers
18. É possível customizar e editar atributos do seu ConstraintSet pelo MotionEditor, diretamente:
19. Créditos: Android Developers
20. É possível customizar ou adicionar novas Transitions, além de suporte a triggers por gestos:
21. Créditos: Android Developers
22. É possível customizar as transições e seus comportamento através de Keyframes:
23. Créditos: Android Developers
24. Créditos: Android Developers
25. Após essa customização, você consegue prever a sua animação pelo Motion Editor também:
26. Créditos: Android Developers
27. Daora, né? ❤
28. Bora ver como o Motion Editor funciona na prática? ✨
29. Para a nossa demo, vamos precisar utilizar a versão 4.0 (estável) do Android Studio, já disponível para download!
30. Android Studio - Android Developers Página oficial do Android Studio developer.android.com/studio Créditos: Android Developers
31. Se eu quiser aprender mais sobre, onde eu posso encontrar material?
32. MotionLayout - Android Developers Site oficial com guias developer.android.com/training/constraint- layout/motionlayout/ Créditos: Android Developers
33. views-widgets-samples - GitHub Projeto open source criado pelo Google disponível no perfil do Android no GitHub, com vários exemplos de layouts feitos com MotionLayout! github.com/android/views-widgets-samples/ Créditos: Android Developers
34. Rebecca Frank (GDE, Android) - Blog Artigo escrito pela Rebecca Franks, GDE de Android, mostrando mais detalhes sobre o Motion Editor! riggaroo.dev/getting-started-with-the- motion-editor-in-android-studio-4-0/ Créditos: Rebecca Franks
35. Android Dev BR - Comunidade Maior comunidade lusófona de Android no Slack, com mais de 6.900 pessoas! ❤✨ androiddevbr.org
36. Perguntas? Ficou alguma dúvida?
37. Muito obrigado! Se tiver qualquer dúvida ou sugestão, pode falar comigo. ❤ @walmyrcarvalho /walmyrcarvalho walmyr@kusudama.com.br