Talk at DroidKaigi 2019 about MotionLayout
Abstract:
MotionLayout is a new ViewGroup focusing on animation, which is provided with the ConstraintLayout 2.0 library.
We provided this ViewGroup to allow developers to create complex animations in a declarative way, which existing Android animation framework, such as Layout Transition using TransitionManager, CoordinatorLayout or ObjectAnimator, didn't cover.
In this talk we will going to cover the topics from the getting started and how MotionLayout differs from the existing animations framework to the deep dive into how the MotionLayout works.
Following topics are going to be included:
- Getting started
- What is MotionLayout
- Highlights of the key usages
- What is the difference with the ways of animation Android framework provides
- Integration with the layout editor
- Where to use MotionLayout
- Real app examples
- Replacing existing animations in a declarative way
- Integration with other key Jetpack components
- How MotionLayout works internally
- Math behind the scenes
- Future plans
3. DroidKaigi 2019
ConstraintLayout 2.0
• Helpers, Virtual Layouts, MotionLayout
• Announced at Google IO’18
• Built upon ConstraintLayout 1.1
• currently : alpha 3
• alpha 4 in a few weeks (?)
4. ConstraintSet
Encapsulate all the rules for a layout
Apply ConstraintSet to an existing layout
Switch between multiple ConstraintSets
Basic animation capabilities using TransitionManager
5. Droidkaigi 2019
Documentation
• Medium Articles:
• Introduction to MotionLayout part I http://bit.ly/2O4AmIz
• Introduction to MotionLayout part II http://bit.ly/2uPuWbw
• Introduction to MotionLayout part III http://bit.ly/2zRjCSj
• Introduction to MotionLayout part IV http://bit.ly/2QqfJaF
• GitHub:
• https://github.com/googlesamples/android-ConstraintLayoutExamples
39. Custom Attributes
• Extension to ConstraintSet
• Define values for any attribute
• Specify the type
• Specify the setter name
string
color
integer
float
dimension
boolean
85. Introducing CycleEditor
• Explore the capabilities of KeyCycles
• XML shown compatible with alpha3
• Features:
• Graph multiple cycles
• Simulate keyCycles effect on a button
86. KeyTimeCycle
•Period - 1/s (Hz)
•Offset - shifts the envelope
•Attributes - set amplitude of wave
Same attributes as KeyCycle
137. Droidkaigi 2019
Documentation
• Medium Articles:
• Introduction to MotionLayout part I http://bit.ly/2O4AmIz
• Introduction to MotionLayout part II http://bit.ly/2uPuWbw
• Introduction to MotionLayout part III http://bit.ly/2zRjCSj
• Introduction to MotionLayout part IV http://bit.ly/2QqfJaF
• GitHub:
• https://github.com/googlesamples/android-ConstraintLayoutExamples
138. Droidkaigi 2019
Give us feedback!
• Issue tracker:
• http://issuetracker.google.com
• ConstraintLayout component
• Twitter
• Nicolas Roard - @camaelon
• John Hoford - @johnhoford
• Takeshi Hagikura - @thagikura