MotionLayout & Motion Editor

MotionLayout is a new class in ConstraintLayout 2.0 dramatically simplifying the creation of animations, particularly related to handling motion and touch events. This session will cover what the library is capable of, where it makes sense to use it, and how to take advantage of the upcoming Motion Editor in Android Studio to quickly add motion to your application!

Transcript

1. DroidconSF 2019 MotionLayout & Motion Editor Animation made easy John Hoford @johnhoford Nicolas Roard @camaelon
2. DroidconSF 2019 So, what is Motion Layout ?
3. DroidconSF 2019 MotionLayout Viewgroup
4. DroidconSF 2019 MotionLayout ConstraintLayout
5. DroidconSF 2019 MotionLayout ConstraintLayout Relative Constraints Center Constraints Dimension Constraints Chains Virtual Layouts Guidelines Barriers Flow Circular Constraints Helpers
6. DroidconSF 2019 What does it do?
7. DroidconSF 2019 MotionLayout Position views Animation Touch Handling State
8. DroidconSF 2019 MotionLayout Position views Animation Touch Handling State
9. DroidconSF 2019 MotionLayout Position views Animation Touch Handling State
10. DroidconSF 2019 MotionLayout Position views Animation Touch Handling State
11. DroidconSF 2019 How?
12. DroidconSF 2019 MotionLayout Transition between states
13. DroidconSF 2019 MotionLayout Transition Start State End State
14. DroidconSF 2019 MotionLayout Transition Start State End State Keyframes
15. DroidconSF 2019 Multiple States State A State B State C State D
16. DroidconSF 2019 Organization <ConstraintSet> <Constraint> <Constraint> <Constraint> <ConstraintSet> <Constraint> <Constraint> <Constraint> <Transition> xml/ <MotionLayout app:layoutDescription=“@xml/ my_motion_scene”> <Views> <Views> <Views> <Views> <Views> <Views> <Views> layout/
17. DroidconSF 2019 States Base State MotionLayout States Position with constraints All view attributes Position with constraints Transform view attributes Custom properties Motion attributes (layout file)
18. <ConstraintSet android:id=“@+id/start"> <Constraint android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="0dp" motion:layout_constraintTop_toTopOf="parent" motion:layout_constraintStart_toStartOf="parent" android:layout_marginTop="0dp" /> </ConstraintSet> <ConstraintSet> <Constraint> <Constraint> <Constraint> Constraint Set Motion Layout
19. Transition •OnClick/OnSwipe Integrated touch handling •KeyFrameSet Modify the transition <Transition> <OnSwipe> <OnClick> <Key[Frames]> <Key[Frames]> <Key[Frames]> <Key[Frames]> <Key[Frames]> <Key[Frames]> <Key[Frames]> <Key[Frames]> <Key[Frames]> <Key[Frames]> <Key[Frames]> <Key[Frames]> <KeyFrameSet> Motion Layout
20. Keyframes <KeyFrameSet> KeyPosition KeyAttribute KeyTrigger KeyCycles KeyTimeCycle Motion Layout
21. KeyPosition Motion Layout parentRelative Coordinate Systems
22. KeyPosition Motion Layout deltaRelative Coordinate Systems
23. KeyPosition Motion Layout pathRelative Coordinate Systems
24. KeyCycle Motion Layout Making properties oscillate
25. KeyTimeCycle Motion Layout Oscillate in time
26. DroidconSF 2019 Demo
28. DroidconSF 2019 Where to use it
29. DroidconSF 2019 Integrate with existing components
30. Coordinator Layout + Collapsible Toolbar
31. DrawerLayout
32. ViewPager
33. DroidconSF 2019 Coordinate Views
35. Nested MotionLayout
36. Start End MotionLayout 2 MotionLayout 1 Start End MotionLayout 2 MotionLayout 1
37. DroidconSF 2019 Programmatic Control
38. DroidconSF 2019 RecyclerView
39. RecyclerView + MotionLayout
40. RecyclerView + MotionLayout
41. ConstraintSet set = parentMotion.getConstraintSet(R.id.start); set.clear(R.id.rvItem); set.constrainWidth(R.id.rvItem, getWidth()); set.constrainHeight(R.id.rvItem, getHeight()); int dx = bounds.left - motionBounds.left; int dy = bounds.top - motionBounds.top; set.connect(R.id.rvItem, ConstraintSet.LEFT, ConstraintSet.PARENT_ID, ConstraintSet.LEFT, dx); set.connect(R.id.rvItem, ConstraintSet.TOP, ConstraintSet.PARENT_ID, ConstraintSet.TOP, dy);
42. ConstraintSet set = parentMotion.getConstraintSet(R.id.start); set.clear(R.id.rvItem); set.constrainWidth(R.id.rvItem, getWidth()); set.constrainHeight(R.id.rvItem, getHeight()); int dx = bounds.left - motionBounds.left; int dy = bounds.top - motionBounds.top; set.connect(R.id.rvItem, ConstraintSet.LEFT, ConstraintSet.PARENT_ID, ConstraintSet.LEFT, dx); set.connect(R.id.rvItem, ConstraintSet.TOP, ConstraintSet.PARENT_ID, ConstraintSet.TOP, dy);
43. ConstraintSet set = parentMotion.getConstraintSet(R.id.start); set.clear(R.id.rvItem); set.constrainWidth(R.id.rvItem, getWidth()); set.constrainHeight(R.id.rvItem, getHeight()); int dx = bounds.left - motionBounds.left; int dy = bounds.top - motionBounds.top; set.connect(R.id.rvItem, ConstraintSet.LEFT, ConstraintSet.PARENT_ID, ConstraintSet.LEFT, dx); set.connect(R.id.rvItem, ConstraintSet.TOP, ConstraintSet.PARENT_ID, ConstraintSet.TOP, dy);
44. RecyclerView + MotionLayout
45. <KeyPosition motion:framePosition="40" motion:percentX="0" motion:percentWidth="0" motion:percentHeight="0" motion:motionTarget="@id/rvItem" />
46. RecyclerView + MotionLayout
47. <KeyAttribute android:rotationX="-20" motion:framePosition="60" motion:motionTarget="@id/rvItem"/>
48. RecyclerView + MotionLayout
49. DroidconSF 2019 Dynamic Histogram
50. Motion Layout From Code 1. Create a Transition() 2. Create ConstraintSet() x 2 and set on the transition 3. Update ConstraintSets as needed 4. Trigger the MotionLayout animation from the start to end motionLayout.transitionToEnd() Tutorial coming soon!! Dynamically updated histogram
51. DroidconSF 2019 MotionLayout List
55. Start Next Previous
56. if (state == R.id.next) { if (counter < myImgDataset.length -1) { counter++; motionLayout.setProgress(0); updateImages(counter); if (counter < myImgDataset.length - 1) { goNextPosition(); } } else if (counter >= myImgDataset.length - 1) { motionLayout.setProgress(0); } }
57. if (state == R.id.next) { if (counter < myImgDataset.length -1) { counter++; motionLayout.setProgress(0); updateImages(counter); if (counter < myImgDataset.length - 1) { goNextPosition(); } } else if (counter >= myImgDataset.length - 1) { motionLayout.setProgress(0); } }
62. All together…
65. MotionLayout List
66. MotionLayout List
67. DroidconSF 2019 Motion Editor
72. Overview Panel
73. Overview Panel 1. Creation Icons 2. Overview Graph 2 1
74. Overview Panel + Constraint Set 1. Creation Icons + Transition + Gesture
75. Overview Panel Creation in action
76. Overview Panel 2.Overview Graph
77. Motion Layout Constraint Sets Transition Gesture 2.Overview Graph Overview Panel
78. Overview Panel Motion Layout Constraint Sets Transition Gesture
79. Overview Panel <MotionScene> <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@id/start" motion:duration=“1000”> <OnClick /> </Transition> <ConstraintSet android:id=“@+id/start”> … </ConstraintSet> <ConstraintSet android:id=“@+id/end”> … </ConstraintSet> </MotionScene>
80. <MotionScene> <Transition motion:constraintSetStart=“@id/small" motion:constraintSetEnd="@+id/base" motion:duration="1000"> <OnClick /> </Transition> <Transition motion:constraintSetStart=“@id/small" motion:constraintSetEnd="@+id/state1" motion:duration="1000"> </Transition> <Transition motion:constraintSetStart=“@id/base” motion:constraintSetEnd="@+id/state1" motion:duration="1000"> </Transition> <ConstraintSet android:id=“@+id/alt" motion:deriveConstraintsFrom="@id/base"> ... </ConstraintSet> <ConstraintSet android:id=“@+id/small" motion:deriveConstraintsFrom="@id/base"> ... </ConstraintSet> <ConstraintSet android:id=“@+id/base”> </ConstraintSet> <ConstraintSet android:id=“@+id/state1” motion:deriveConstraintsFrom="@id/base"> ... </ConstraintSet> </MotionScene> Overview Panel
81. Overview Panel Overview Graph as State Control Unit
82. Overview Panel
85. Selection Panel
86. Selection Panel Selection Panel 1. Motion Layout selected 2. Constraint Set selected 3. Transition selected 1 2 3
87. Selection Panel 1. Motion Layout Selected
88. Selection Panel 1. Motion Layout Selected What Component? Properly Constrained?
89. Selection Panel 2.Constraint Set Selected
90. Selection Panel 2.Constraint Set Selected Constrained? Where? What Component?
91. Selection Panel
92. Selection Panel 3.Transition Selected
93. Selection Panel 3.Transition Selected Timeline & Scrubber Animation Toolbar Keyframes + Keyframe
96. Attributes Panel
97. Attributes Panel Attributes Panel 1. Reflecting Selection 2. Showing Inheritance 3. Authoring Constraints 4.Adding Custom Attributes
98. Attributes panel reflects declared & potential attributes of whatever is selected Attributes Panel 1. Reflecting Selection
99. Inherited Declared Attributes panel reflects inherited v.s. declared attributes with greyed-out & black values 2.Showing Inheritance Attributes Panel
100. Attributes Panel 3.Authoring Constraints
102. Attributes Panel 4.Adding Custom Attributes
104. DroidconSF 2019 Demo !
105. Andrew Watson @creativedrewy
108. DroidconSF 2019 Wrap up
109. DroidconSF 2019 Check it out Android Studio 4.0 Canary 4 ConstraintLayout 2.0 Beta 3
110. DroidconSF 2019 Layout Editor Navigation Editor Resource Manager Compose Tooling Multi Preview Layout Inspector Motion Editor Android Studio Design Tools
111. DroidconSF 2019 http://issuetracker.google.com Android Public Tracker > App Development > Jetpack (androidx) > ConstraintLayout > Android Studio > Design Tools > Motion Editor ConstraintLayout component Motion Editor component
112. DroidconSF 2019 ConstraintLayout & MotionLayout Workshop when? where? Android Studio ConstraintLayout 5:10 PM Fisher East 4.0 canary 4 2.0.0-beta3
113. DroidconSF 2019 Thank you! John Hoford @johnhoford Nicolas Roard @camaelon
114. DroidconSF 2019 MotionLayout workshop camaelon.github.io codelabs.developers.google.com/codelabs/ motion-layout