Slide 1
Slide 1 text
How to Motion Editor
Report from Android Dev Summit 2019
@mochico
Slide 2
Slide 2 text
About me
mochico（@_mochicon_）
Android / Java / Kotlin
Techbooster / 技術書典
Slide 3
Slide 3 text
Memory of Android Dev Summit 2019
Slide 4
Slide 4 text
What's New in Android Studio Design Tools
https://youtu.be/vqDwSK5t7Hk?t=1172
Slide 5
Slide 5 text
What is Motion Editor
Slide 6
Slide 6 text
What is the MotionLayout
Subclass of ConstraintLayout
Define motions by XML
Included in ConstraintLayout2.0
Slide 7
Slide 7 text
How to use
Motion Editor
Slide 8
Slide 8 text
Prepare to use Motion Editor
Android Studio 4.0+
implementation ‘androidx.constraintlayout:constraintlayout:2.0.0-beta3'
classpath 'com.android.tools.build:gradle:4.0.0-alpha03'
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
layout.xml
Slide 11
Slide 11 text
fragment_first_scene.xml
Slide 12
Slide 12 text
Motion Scene
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
start to end
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
Action Icons
Create ConstraintSet
Create Transition
Create Handler
Slide 17
Slide 17 text
Create from Action Icons
Slide 18
Slide 18 text
Create Handler
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
KeyFrames
KeyPosition
KeyAttribute
KeyTrigger
KeyCycle
KeyTimeCycle
Slide 21
Slide 21 text
KeyCycle
Slide 22
Slide 22 text
Selection Panel
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
Attributes
Select Transition
Select KeyFrame
Slide 25
Slide 25 text
demo (if I can)
Slide 26
Slide 26 text
Wrap up Motion Editor
Cool visualization for KeyFrames
Not for CoordinatorLayout, DrawerLayout etc
Easy to add properties for animation as XML
AS4.0 still canary, Motion Editor still beta
Slide 27
Slide 27 text
References
What's New in Android Studio Design Tools (Android Dev Summit '19) - YouTube : https://
www.youtube.com/watch?v=vqDwSK5t7Hk
Defining motion paths in MotionLayout - Google Developers - Medium : https://medium.com/
google-developers/defining-motion-paths-in-motionlayout-6095b874d37
Manage motion and widget animation with MotionLayout : https://developer.android.com/
training/constraint-layout/motionlayout
googlearchive/android-ConstraintLayoutExamples: Migrated: : https://github.com/googlearchive/
android-ConstraintLayoutExamples
Animation with MotionLayout : https://codelabs.developers.google.com/codelabs/motion-
layout/#0
DroidKaigi 2019 - Deep dive into MotionLayout / thagikura, John Hoford, Nicolas Roard - YouTube :
https://www.youtube.com/watch?v=r8cYDlBOPaA
Thank you!