Advanced & Practical MotionLayout - droidcon SF 2019

ConstraintLayout 2.0 has been steadily releasing new features that give Android developers far better animation tools than we've ever had before. In 2019 we can no longer avoid designing and developing applications that have beautiful motion, that should be a standard experience that users expect.

We will cover how to practically use MotionLayout to deliver on complex design asks. This will cover reusing Constraints between multiple Transitions, how to apply multiple effects at different points in a Transition, switching between Transitions programmatically or automatically, how to link the progress of MotionLayout to other widgets, and especially how complex interactions with a RecyclerView can be straightforward. Whether you're a senior UI developer who knows the intricacies of Animators or someone who has shied away from animation on Android, this talk should give you working knowledge of how MotionLayout can make a difference in your app and team.

Transcript

1. Advanced & Practical MotionLayout Jason Pearson droidcon SF 2019
4. Basics First
5. @layout/activity_main <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" /> Creating our first MotionScene
6. @layout/activity_main <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="…" /> Creating our first MotionScene @layout/activity_main
7. @layout/activity_main <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="…" /> Creating our first MotionScene Need to create a MotionScene @layout/activity_main
8. src/ ├── java/ └── res/ ├── drawable ├── layout │ └── ├── mipmap └── values Creating our first MotionScene activity_main.xml
9. Creating our first MotionScene src/ ├── java/ └── res/ ├── drawable ├── layout │ └── ├── mipmap ├── values └── xml activity_main.xml
10. src/ ├── java/ └── res/ ├── drawable ├── layout │ └── ├── mipmap ├── values └── xml └── motion_scene.xml activity_main.xml Creating our first MotionScene xml motion_scene
11. @xml/motion_scene <?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="…" xmlns:app="…" > </MotionScene> Creating our first MotionScene motion_scene xml
12. @xml/motion_scene <?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="…" xmlns:app="…" > </MotionScene> @layout/activity_main <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="…" /> Creating our first MotionScene @layout/activity_main
13. @xml/motion_scene <?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="…" xmlns:app="…" > </MotionScene> @layout/activity_main <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="…" /> Creating our first MotionScene @layout/activity_main
14. @xml/motion_scene <?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="…" xmlns:app="…" > </MotionScene> @layout/activity_main <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/motion_scene" /> Creating our first MotionScene @layout/activity_main
15. @layout/activity_main <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/motion_scene" /> @layout/activity_main Creating our first MotionScene @xml/motion_scene <?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="…" xmlns:app="…" > </MotionScene>
16. @layout/activity_main <androidx.constraintlayout.motion.widget.MotionLayout android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/motion_scene" > </androidx.constraintlayout.motion.widget.MotionLayout> Adding first child to MotionScene
17. @layout/activity_main <androidx.constraintlayout.motion.widget.MotionLayout android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/motion_scene" > <View android:id="@+id/square" android:layout_width="100dp" android:layout_height="100dp" android:background="@color/colorAccent" /> </androidx.constraintlayout.motion.widget.MotionLayout> Adding first child to MotionScene
18. @xml/motion_scene <?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="…" xmlns:app="…" > </MotionScene> Adding first ConstraintSet
19. @xml/motion_scene <?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="…" xmlns:app="…" > <ConstraintSet android:id="@+id/start"> </ConstraintSet> </MotionScene> Adding first ConstraintSet
20. @xml/motion_scene <?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="…" xmlns:app="…" > <ConstraintSet android:id="@+id/start"> </ConstraintSet> </MotionScene> Adding first ConstraintSet Omitting schemas from now on
21. @xml/motion_scene <MotionScene> <ConstraintSet android:id="@+id/start"> </ConstraintSet> </MotionScene> Adding first ConstraintSet
22. @xml/motion_scene <MotionScene> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" /> </ConstraintSet> </MotionScene> Adding first ConstraintSet @xml/motion_scene
23. @xml/motion_scene <MotionScene> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" /> </ConstraintSet> </MotionScene> Adding first ConstraintSet @xml/motion_scene motion_scene.xml ConstraintSet start
24. <MotionScene> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" /> </ConstraintSet> </MotionScene> Adding second ConstraintSet @xml/motion_scene motion_scene.xml ConstraintSet start
25. <MotionScene> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"> </ConstraintSet> </MotionScene> Adding second ConstraintSet @xml/motion_scene motion_scene.xml ConstraintSet start ConstraintSet end
26. <MotionScene> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" /> </ConstraintSet> </MotionScene> Adding second ConstraintSet @xml/motion_scene motion_scene.xml ConstraintSet start ConstraintSet end
27. <MotionScene> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" /> </ConstraintSet> </MotionScene> Adding second ConstraintSet @xml/motion_scene motion_scene.xml ConstraintSet start ConstraintSet end
28. @xml/motion_scene <MotionScene> <Transition /> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintBottom_toBottomOf="parent" Adding first Transition @xml/motion_scene motion_scene.xml ConstraintSet start ConstraintSet end Transition
29. @xml/motion_scene <MotionScene> <Transition > </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/square" android:layout_width="100dp" Adding first Transition @xml/motion_scene motion_scene.xml ConstraintSet start ConstraintSet end Transition
30. @xml/motion_scene <MotionScene> <Transition app:constraintSetStart="@id/start" > </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" /> </ConstraintSet> Adding first Transition @xml/motion_scene motion_scene.xml ConstraintSet start ConstraintSet end Transition start
31. @xml/motion_scene <MotionScene> <Transition app:constraintSetStart="@id/start" app:constraintSetEnd="@id/end" > </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" /> </ConstraintSet> Adding first Transition @xml/motion_scene motion_scene.xml ConstraintSet start ConstraintSet end Transition start end
32. @xml/motion_scene <MotionScene> <Transition app:constraintSetStart="@id/start" app:constraintSetEnd="@id/end" > <OnClick /> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" Adding first Transition @xml/motion_scene motion_scene.xml ConstraintSet start ConstraintSet end Transition OnClick start end
33. @xml/motion_scene <MotionScene> <Transition app:constraintSetStart="@id/start" app:constraintSetEnd="@id/end" > <OnClick app:targetId="@id/square" /> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" Adding first Transition @xml/motion_scene motion_scene.xml ConstraintSet start ConstraintSet end Transition OnClick square start end
34. @xml/motion_scene <MotionScene> <Transition app:constraintSetStart="@id/start" app:constraintSetEnd="@id/end" > <OnClick app:targetId="@id/square" app:clickAction="transitionToEnd" /> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintTop_toTopOf="parent" Adding first Transition @xml/motion_scene motion_scene.xml ConstraintSet start ConstraintSet end Transition OnClick square start end
35. @xml/motion_scene <MotionScene> <Transition app:constraintSetStart="@id/start" app:constraintSetEnd="@id/end" > <OnClick app:targetId="@id/square" app:clickAction="transitionToEnd" /> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintTop_toTopOf="parent" Adding first Transition @xml/motion_scene motion_scene.xml ConstraintSet start ConstraintSet end Transition OnClick square start end
36. It works! "
 
 motion_scene.xml ConstraintSet start ConstraintSet end Transition OnClick square start end
37. @xml/motion_scene <MotionScene> <Transition app:constraintSetStart="@id/start" app:constraintSetEnd="@id/end" > <OnClick app:targetId="@id/square" app:clickAction="transitionToEnd" /> </Transition> <ConstraintSet android:id="@+id/start" … /> <ConstraintSet android:id="@+id/end" … /> </MotionScene> @xml/motion_scene motion_scene.xml ConstraintSet start ConstraintSet end Transition OnClick square start end OnClick
38. <OnClick app:targetId="@id/square" app:clickAction="transitionToEnd" /> OnClick @xml/motion_scene motion_scene.xml ConstraintSet start ConstraintSet end Transition OnClick square start end
39. @xml/motion_scene <OnClick app:targetId="@id/square" app:clickAction="transitionToStart" /> OnClick motion_scene.xml ConstraintSet start ConstraintSet end Transition OnClick square start end
40. @xml/motion_scene <OnClick app:targetId="@id/square" app:clickAction="transitionToEnd|transitionToStart" /> OnClick motion_scene.xml ConstraintSet start ConstraintSet end Transition OnClick square start end
41. @xml/motion_scene <OnClick app:targetId="@id/square" app:clickAction="toggle" /> OnClick motion_scene.xml ConstraintSet start ConstraintSet end Transition OnClick square start end
42. OnClick motion_scene_with_click.xml Transition OnClick square start end ConstraintSet start ConstraintSet end
43. motion_scene_with_click.xml motion_scene_with_swipe.xml OnSwipe OnClick ConstraintSet start ConstraintSet end Transition OnClick square start end Transition OnSwipe square start end start end ConstraintSet start ConstraintSet end
44. Transition OnClick square start Transition end OnSwipe square start end OnSwipe OnClick
45. @xml/motion_scene_with_swipe <MotionScene> <Transition app:constraintSetStart="@id/start" app:constraintSetEnd="@id/end" > <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="bottom" app:dragDirection="dragDown" /> </Transition> <ConstraintSet android:id="@+id/start" … /> <ConstraintSet android:id="@+id/end" … /> </MotionScene> @xml/motion_scene_with_click <MotionScene> <Transition app:constraintSetStart="@id/start" app:constraintSetEnd="@id/end" > <OnClick app:targetId="@id/square" app:clickAction="transitionToEnd" /> </Transition> <ConstraintSet android:id="@+id/start" … /> <ConstraintSet android:id="@+id/end" … /> </MotionScene> @xml/motion_scene_with_click @xml/motion_scene_with_swipe OnSwipe OnClick
46. @xml/motion_scene_with_swipe <MotionScene> <Transition app:constraintSetStart="@id/start" app:constraintSetEnd="@id/end" > <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="bottom" app:dragDirection="dragDown" /> </Transition> <ConstraintSet android:id="@+id/start" … /> <ConstraintSet android:id="@+id/end" … /> </MotionScene> @xml/motion_scene_with_click <MotionScene> <Transition app:constraintSetStart="@id/start" app:constraintSetEnd="@id/end" > <OnClick app:targetId="@id/square" app:clickAction="transitionToEnd" /> </Transition> <ConstraintSet android:id="@+id/start" … /> <ConstraintSet android:id="@+id/end" … /> </MotionScene> OnSwipe OnClick @xml/motion_scene_with_click @xml/motion_scene_with_swipe
47. @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="bottom" app:dragDirection="dragDown" /> OnSwipe
48. @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="bottom" app:dragDirection="dragDown" /> OnSwipe
49. @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="bottom" app:dragDirection="dragDown" /> OnSwipe
50. @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="bottom" app:dragDirection="dragDown" /> OnSwipe
51. @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="bottom" app:dragDirection="dragDown" /> OnSwipe
52. @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="bottom" app:dragDirection="dragDown" /> OnSwipe
53. OnSwipe @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="bottom" app:dragDirection="dragDown" />
54. OnSwipe @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="bottom" app:dragDirection="dragDown" />
55. OnSwipe @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="bottom" app:dragDirection="dragDown" />
56. OnSwipe @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="bottom" app:dragDirection="dragDown" />
57. OnSwipe @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="bottom" app:dragDirection="dragDown" />
58. OnSwipe @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="bottom" app:dragDirection="dragDown" />
59. OnSwipe @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="top" app:dragDirection="dragDown" />
60. OnSwipe @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="top" app:dragDirection="dragDown" />
61. OnSwipe @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="top" app:dragDirection="dragDown" />
62. OnSwipe @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="top" app:dragDirection="dragDown" />
63. OnSwipe @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="top" app:dragDirection="dragDown" />
64. OnSwipe @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="left" app:dragDirection="dragDown" />
65. OnSwipe @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="left" app:dragDirection="dragDown" />
66. OnSwipe @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="left" app:dragDirection="dragDown" />
67. @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="left" app:dragDirection="dragDown" /> OnSwipe
68. @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="left" app:dragDirection="dragDown" app:onTouchUp="..." /> OnSwipe
69. autoComplete stop decelerate
70. @xml/motion_scene <MotionScene> <Transition app:constraintSetStart="@id/start" app:constraintSetEnd="@id/end" app:motionInterpolator="easeInOut" > <OnClick-…-/> </Transition> <ConstraintSet-android:id="@+id/start"> <Constraint-android:id="@id/square"> <Layout-…-/> <Motion-app:transitionEasing="standard"> </Constraint> <Constraint-android:id="@id/otherSquare"> @xml/motion_scene Interpolation
71. app:motionInterpolator="easeIn" app:motionInterpolator="easeOut" app:motionInterpolator="easeInOut" app:motionInterpolator="bounce" app:motionInterpolator="linear" Interpolation
72. easeIn easeInOut easeOut
73. standard linear bounce
74. cubic app:motionInterpolator="cubic(0.42,0,1,1)" https://cubic-bezier.com/#.42,0,1,1
75. https://cubic-bezier.com/#.42,0,1,1
76. @xml/swiping_scene <MotionScene> <ConstraintSet-android:id="@+id/start"-…-/> <ConstraintSet-android:id="@+id/end"-…-/> </MotionScene> Adding another state swiping_scene.xml ConstraintSet start ConstraintSet end
77. @xml/swiping_scene <MotionScene> <ConstraintSet-android:id="@+id/start"-…-/> <ConstraintSet-android:id="@+id/middle"-…-/> <ConstraintSet-android:id="@+id/end"-…-/> </MotionScene> Adding another state swiping_scene.xml ConstraintSet start ConstraintSet end ConstraintSet middle
78. @xml/swiping_scene <MotionScene> <Transition-android:id="@+id/swipe_a" -…-/> <Transition-android:id="@+id/swipe_b" -…-/> <ConstraintSet-android:id="@+id/start"-…-/> <ConstraintSet-android:id="@+id/middle"-…-/> <ConstraintSet-android:id="@+id/end"-…-/> </MotionScene> Adding another state swiping_scene.xml ConstraintSet start Transition swipe_a OnSwipe square start middle Transition swipe_b OnSwipe square middle end
79. Adding another state swiping_scene.xml ConstraintSet start ConstraintSet end ConstraintSet middle Transition swipe_a OnSwipe square start middle Transition swipe_b OnSwipe square middle end
80. <ConstraintSet android:id="@+id/start" > <Constraint android:id="@id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" > </Constraint> </ConstraintSet> Sub Elements
81. <ConstraintSet android:id="@+id/start" > <Constraint android:id="@id/square" > <Layout android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" > </Constraint> </ConstraintSet> Sub Elements
82. <ConstraintSet android:id="@+id/start" > <Constraint android:id="@id/square" > <Layout /> <PropertySet /> <Transform /> <Motion /> <CustomAttribute /> </Constraint> </ConstraintSet> Sub Elements
83. <Layout android:layout_width="match_parent|wrap_content|dp" android:layout_height="match_parent|wrap_content|dp" android:layout_marginTop="dp" android:layout_marginStart="dp" android:layout_marginEnd="dp" android:layout_marginBottom="dp" app:layout_constrainedWidth="boolean" app:layout_constrainedHeight="boolean" app:layout_constraintWidth_min="dp" app:layout_constraintHeight_max="dp" app:layout_constraintDimensionRatio="1:1" app:layout_constraintHorizontal_bias="0.35" app:layout_constraintVertical_bias="0.35" Sub Elements :-Layout
84. android:layout_marginBottom="dp" app:layout_constrainedWidth="boolean" app:layout_constrainedHeight="boolean" app:layout_constraintWidth_min="dp" app:layout_constraintHeight_max="dp" app:layout_constraintDimensionRatio="1:1" app:layout_constraintHorizontal_bias="0.35" app:layout_constraintVertical_bias="0.35" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintVertical_chainStyle="spread" /> Sub Elements :-Layout
85. <PropertySet android:visibility="visible" android:alpha="1" app:visibilityMode="ignore" app:motionProgress="0"/> Sub Elements :-PropertySet
86. <ConstraintSet android:id="@+id/start" > <Constraint android:id="@id/sample_text" > <CustomAttribute app:attributeName="text" app:customStringValue="Hi #DCSF2019! " /> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end" > <Constraint android:id="@id/sample_text" > <CustomAttribute app:attributeName="text" app:customStringValue=" MotionLayout " /> </Constraint> </ConstraintSet> Changing Text
87. <ConstraintSet android:id="@+id/start" > <Constraint android:id="@id/sample_text" > <CustomAttribute app:attributeName="text" app:customStringValue="Hi #DCSF2019! " /> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end" > <Constraint android:id="@id/sample_text" > <CustomAttribute app:attributeName="text" app:customStringValue=" MotionLayout " /> </Constraint> </ConstraintSet> Changing Text
88. <Motion app:pathMotionArc="startHorizontal" /> <Motion app:pathMotionArc="startVertical" /> Sub Elements :-Motion
89. Linear Horizontal Vertical
90. Horizontal Linear Vertical
91. @xml/motion_scene <MotionScene> <Transition app:constraintSetStart="@id/start" app:constraintSetEnd="@id/end" app:motionInterpolator="easeInOut" > <OnClick-…-/> </Transition> <ConstraintSet-android:id="@+id/start"> <Constraint-android:id="@id/square"> <Layout-…-/> <Motion-app:transitionEasing="standard"> </Constraint> <Constraint-android:id="@id/otherSquare"> @xml/motion_scene Sub Elements :-Motion
92. <Transition app:constraintSetStart="@id/start" app:constraintSetEnd="@id/end" app:motionInterpolator="easeInOut" > <OnClick-…-/> </Transition> <ConstraintSet-android:id="@+id/start"> <Constraint-android:id="@id/square"> <Layout-…-/> <Motion-app:transitionEasing="standard"> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end"-…-/> </MotionScene> Sub Elements :-Motion @xml/motion_scene
93. <Transform android:translationY="dp" android:translationX="dp" android:translationZ="dp" android:transformPivotX="dp" android:transformPivotY="dp" android:scaleY="float" android:scaleX="float" android:rotation="degrees" android:rotationX="degrees" android:rotationY="degrees" android:elevation="dp" /> Sub Elements: Transform
94. swiping_scene.xml Sub Elements: Transform ConstraintSet start ConstraintSet end Transition toggle OnClick square start end
95. swiping_scene.xml Sub Elements: Transform ConstraintSet start ConstraintSet end Transition toggle OnClick square start end Transform
96. swiping_scene.xml Sub Elements: Transform ConstraintSet start ConstraintSet end Transition toggle OnClick square start end Transform rotate 360
97. swiping_scene.xml Sub Elements: Transform ConstraintSet start ConstraintSet end Transition toggle OnClick square start end Transform rotate 360 rotateX 360
98. swiping_scene.xml Sub Elements: Transform ConstraintSet start ConstraintSet end Transition toggle OnClick square start end Transform rotate 360 rotateX 360
99. Sub Elements: Transform swiping_scene.xml ConstraintSet start ConstraintSet end Transition toggle OnClick square start end Transform rotate 360 rotateX 360
100. Sub Elements: Transform swiping_scene.xml ConstraintSet start ConstraintSet end Transition toggle OnClick square start end KeyFrameSet Transform rotate 360 rotateX 360
101. Sub Elements: Transform swiping_scene.xml ConstraintSet start ConstraintSet end Transition toggle OnClick square start end KeyFrameSet KeyFrame 33 KeyFrame 66 translateX -64dp translateX 64dp Transform rotate 360 rotateX 360
102. KeyFrameSet Sub Elements: Transform swiping_scene.xml ConstraintSet start ConstraintSet end Transition toggle OnClick square start end KeyFrameSet KeyFrame 33 KeyFrame 66 translateX -64dp translateX 64dp Transform rotate 360 rotateX 360
103. KeyFrameSet KeyFrameSets
104. KeyFrameSet KeyFrameSets
105. KeyFrameSets KeyFrameSet KeyFrames let you specify a change at a point in time during transition
106. KeyFrameSets KeyFrameSet KeyFrames let you specify a change at a point in time during transition
107. KeyFrameSets KeyFrameSet 100 0 25 50 75 KeyFrames let you specify a change at a point in time during transition
108. KeyFrameSets KeyFrameSet 100 0 25 50 75 KeyFrames let you specify a change at a point in time during transition
109. KeyFrameSets KeyFrameSet 100 0 25 50 75 KeyFrames let you specify a change at a point in time during transition
110. KeyFrameSets KeyFrameSet 100 0 25 50 75 KeyFrames let you specify a change at a point in time during transition
111. KeyFrameSets KeyFrameSet 100 0 25 50 75 KeyFrames let you specify a change at a point in time during transition
112. KeyFrameSets KeyFrameSet 100 0 25 50 75 KeyFrames let you specify a change at a point in time during transition
113. KeyFrameSets KeyFrameSet 100 0 25 50 75 KeyFrames let you specify a change at a point in time during transition
114. KeyFrameSets KeyFrameSet 100 0 25 50 75 KeyFrames let you specify a change at a point in time during transition
115. <Transition> <OnClick-/> <KeyFrameSet> <KeyAttribute app:motionTarget="@id/square" app:framePosition="33" android:translationX="-64dp" /> <KeyAttribute app:motionTarget="@id/square" app:framePosition="66" android:translationX="64dp" /> </KeyFrameSet> </Transition> KeyFrameSets: Key Attribute
116. <Transition> <OnClick-/> <KeyFrameSet> <KeyAttribute app:motionTarget="@id/square" app:framePosition="33" android:translationX="-64dp" /> <KeyAttribute app:motionTarget="@id/square" app:framePosition="66" android:translationX="64dp" /> </KeyFrameSet> </Transition> KeyFrameSets: Key Attribute
117. <Transition> <OnClick-/> <KeyFrameSet> <KeyAttribute app:motionTarget="@id/square" app:framePosition="33" android:translationX="-64dp" /> <KeyAttribute app:motionTarget="@id/square" app:framePosition="66" android:translationX="64dp" /> </KeyFrameSet> </Transition> KeyFrameSets: Key Attribute
118. <Transition> <OnClick-/> <KeyFrameSet> <KeyAttribute app:motionTarget="@id/square" app:framePosition="33" android:translationX="-64dp" /> <KeyAttribute app:motionTarget="@id/square" app:framePosition="66" android:translationX="64dp" /> </KeyFrameSet> </Transition> KeyFrameSets: Key Attribute
119. KeyFrameSets: Key Attribute <Transition> <OnClick-/> <KeyFrameSet> <KeyAttribute app:motionTarget="@id/square" app:framePosition="33" android:translationX="-64dp" /> <KeyAttribute app:motionTarget="@id/square" app:framePosition="66" android:translationX="64dp" /> </KeyFrameSet> </Transition>
120. KeyFrameSets: Key Attribute <Transition> <KeyFrameSet> <KeyAttribute /> <KeyPosition /> <KeyCycle /> <KeyTimeCycle /> </KeyFrameSet> </Transition>
121. Practical Examples
122. Swiping Items @layout/activity_swipe_items <androidx.recyclerview.widget.RecyclerView android:id="@+id/email_list" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
123. Swiping Items @layout/activity_swipe_items <androidx.recyclerview.widget.RecyclerView android:id="@+id/email_list" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" tools:listitem="@layout/email_item" />
124. Swiping Items @layout/activity_swipe_items <androidx.recyclerview.widget.RecyclerView android:id="@+id/email_list" android:layout_width="match_parent" @layout/email_item <androidx.constraintlayout.motion.widget.MotionLayout app:layoutDescription="@xml/swipe_item_scene" > <View android:id="@+id/archive_button" …/> <View android:id="@+id/foreground" …/> <ImageView android:id="@+id/thumbnail" …/> <TextView android:id="@+id/name" …/> </androidx.constraintlayout.motion.widget.MotionLayout> @xml/swipe_item_scene
125. Swiping Items <MotionScene> <Transition app:constraintSetStart="@id/start" app:constraintSetEnd="@id/end" > <OnSwipe app:touchAnchorId="@id/foreground" app:touchAnchorSide="right" app:dragDirection="dragLeft" app:onTouchUp="decelerateAndComplete" /> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/foreground"> <Transform android:translationY="0dp" /> @xml/swipe_item_scene
126. Swiping Items <MotionScene> <Transition app:constraintSetStart="@id/start" app:constraintSetEnd="@id/end" > <OnSwipe app:touchAnchorId="@id/foreground" app:touchAnchorSide="right" app:dragDirection="dragLeft" app:onTouchUp="decelerateAndComplete" /> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/foreground"> <Transform android:translationY="0dp" /> @xml/swipe_item_scene
127. Swiping Items <MotionScene> <Transition app:constraintSetStart="@id/start" app:constraintSetEnd="@id/end" > <OnSwipe app:touchAnchorId="@id/foreground" app:touchAnchorSide="right" app:dragDirection="dragLeft" app:onTouchUp="decelerateAndComplete" /> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/foreground"> <Transform android:translationY="0dp" /> @xml/swipe_item_scene
128. Swiping Items
129. Swiping Items
130. Swiping Items
131. Swiping Items There is no change in horizontal position of any side in the foreground view, therefore MotionLayout cannot determine how to interpolate between the two states
132. Swiping Items
133. Swiping Items
134. Swiping Items
135. Swiping Items
136. Swiping Items
137. Swiping Items <OnSwipe app:touchAnchorId="@id/foreground" app:touchAnchorSide="right" app:dragDirection="dragLeft" />
138. Swiping Items <OnSwipe app:dragDirection="dragLeft" /> Or do not specify a touchAnchor and then there is no need to create clever hidden views.
139. Collapsing Toolbar @layout/activity_collapsing_toolbar <androidx.constraintlayout.motion.widget.MotionLayout app:layoutDescription="@xml/collapse_on_scroll_scene" > <RecyclerView android:id="@+id/email_list" …/> <View android:id="@+id/header_layout" …/> </androidx.constraintlayout.motion.widget.MotionLayout>
140. Collapsing Toolbar @xml/collapse_on_scroll_scene <MotionScene> <Transition app:constraintSetStart="@id/start" app:constraintSetEnd="@id/end" > <OnSwipe app:targetId="@id/header_layout" app:touchAnchorSide="bottom" app:dragDirection="dragUp" /> </Transition> <ConstraintSet android:id="@+id/start" … /> <ConstraintSet android:id="@+id/end" … /> </MotionScene>
141. Collapsing Toolbar @xml/collapse_on_scroll_scene <MotionScene> <Transition … /> <ConstraintSet android:id="@+id/start" … /> <ConstraintSet android:id="@+id/end" … /> </MotionScene>
142. <MotionScene> <Transition …/> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/header_layout" android:layout_width="match_parent" android:layout_height="128dp" app:layout_constraintTop_toTopOf="parent"/> <Constraint android:id="@id/email_list" android:layout_width="match_parent" android:layout_height="0dp" app:layout_constraintTop_toBottomOf="@id/header_layout" app:layout_constraintBottom_toBottomOf="parent"/> </ConstraintSet> <ConstraintSet android:id="@+id/end" app:deriveConstraintsFrom="@id/start"> <Constraint android:id="@id/header_layout" Collapsing Toolbar @xml/collapse_on_scroll_scene
143. android:layout_height="128dp" app:layout_constraintTop_toTopOf="parent"/> <Constraint android:id="@id/todo_list" android:layout_width="match_parent" android:layout_height="0dp" app:layout_constraintTop_toBottomOf="@id/header_layout" app:layout_constraintBottom_toBottomOf="parent"/> </ConstraintSet> <ConstraintSet android:id="@+id/end" app:deriveConstraintsFrom="@id/start"> <Constraint android:id="@id/header_layout" android:layout_width="match_parent" android:layout_height="80dp" app:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> </MotionScene> Collapsing Toolbar @xml/collapse_on_scroll_scene
144. android:layout_height="128dp" app:layout_constraintTop_toTopOf="parent"/> <Constraint android:id="@id/todo_list" android:layout_width="match_parent" android:layout_height="0dp" app:layout_constraintTop_toBottomOf="@id/header_layout" app:layout_constraintBottom_toBottomOf="parent"/> </ConstraintSet> <ConstraintSet android:id="@+id/end" app:deriveConstraintsFrom="@id/start"> <Constraint android:id="@id/header_layout" android:layout_width="match_parent" android:layout_height="80dp" app:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> </MotionScene> Collapsing Toolbar - Derived Constraints @xml/collapse_on_scroll_scene
145. Nested MotionLayout
146. @layout/activity_collapsing_toolbar <androidx.constraintlayout.motion.widget.MotionLayout app:layoutDescription="@xml/collapse_on_scroll_scene" > <RecyclerView android:id="@+id/email_list" …/> <View android:id="@+id/header_layout" …/> </androidx.constraintlayout.motion.widget.MotionLayout> Nested MotionLayout @layout/activity_collapsing_toolbar
147. @layout/activity_collapsing_toolbar <androidx.constraintlayout.motion.widget.MotionLayout app:layoutDescription="@xml/collapse_on_scroll_scene" > <RecyclerView android:id="@+id/email_list" …/> <MotionLayout android:id="@+id/header_layout" …/> </androidx.constraintlayout.motion.widget.MotionLayout> Nested MotionLayout @layout/activity_collapsing_toolbar
148. <MotionScene> <Transition app:constraintSetStart="@id/start" app:constraintSetEnd="@id/end" /> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/header_title"> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/header_title"> </Constraint> </ConstraintSet> </MotionScene> Nested MotionLayout Header - Scaling Text @xml/collapsing_header_scene
149. <MotionScene> <Transition …/> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/header_title"> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/header_title"> </Constraint> </ConstraintSet> </MotionScene> @xml/collapsing_header_scene Nested MotionLayout Header - Scaling Text
150. Scaling Text <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/sample_text"> <CustomAttribute app:attributeName="textSize" app:customFloatValue="64" /> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/sample_text"> <CustomAttribute app:attributeName="textSize" app:customFloatValue="32" /> </Constraint> </ConstraintSet>
151. <ConstraintSet android:id="@+id/start" > <Constraint android:id="@id/sample_text" > <CustomAttribute app:attributeName="textSize" app:customFloatValue="64" /> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end" > <Constraint android:id="@id/sample_text" > <CustomAttribute app:attributeName="textSize" app:customFloatValue="32" /> </Constraint> </ConstraintSet> Scaling Text
152. <ConstraintSet android:id="@+id/start" > <Constraint android:id="@id/sample_t <Transform android:scaleX="1" android:scaleX="1" /> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end" > <Constraint android:id="@id/sample_t <Transform android:scaleX="0.5" android:scaleX="0.5" /> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/start" > <Constraint android:id="@id/sample_text" > <CustomAttribute app:attributeName="textSize" app:customFloatValue="64" /> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end" > <Constraint android:id="@id/sample_text" > <CustomAttribute app:attributeName="textSize" app:customFloatValue="32" /> </Constraint> </ConstraintSet> Scaling Text
153. textSize via CustomAttribute scaleX&Y via Transform
154. <MotionScene> <Transition …/> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/header_title"> <Transform android:scaleX="1.0" android:scaleY="1.0" /> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@id/header_title"> <Transform android:scaleX="0.7" android:scaleY="0.7" /> </Constraint> </ConstraintSet> </MotionScene> Nested MotionLayout Header @xml/collapsing_header_scene
155. <MotionScene> <Transition …/> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/header_layout"> <Layout android:layout_width="match_parent" android:layout_height="128dp" app:layout_constraintTop_toTopOf="parent" /> <PropertySet app:motionProgress="0" /> <Transform android:elevation="0dp" /> </Constraint> <Constraint android:id="@id/todo_list"> <Layout android:layout_width="match_parent" android:layout_height="0dp" Nested MotionLayout @xml/collapse_on_scroll_scene
156. <MotionScene> <Transition …/> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/header_layout"> <Layout android:layout_width="match_parent" android:layout_height="128dp" app:layout_constraintTop_toTopOf="parent" /> <PropertySet app:motionProgress="0" /> <Transform android:elevation="0dp" /> </Constraint> <Constraint android:id="@id/todo_list"> <Layout android:layout_width="match_parent" android:layout_height="0dp" app:layout_constraintTop_toBottomOf="@id/header_layout" app:layout_constraintBottom_toBottomOf="parent" /> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end" Nested MotionLayout @xml/collapse_on_scroll_scene
157. <Layout android:layout_width="match_parent" android:layout_height="0dp" app:layout_constraintTop_toBottomOf="@id/header_layout" app:layout_constraintBottom_toBottomOf="parent" /> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end" app:deriveConstraintsFrom="@id/start"> <Constraint android:id="@id/header_layout"> <Layout android:layout_width="match_parent" android:layout_height="80dp" app:layout_constraintTop_toTopOf="parent" /> <PropertySet app:motionProgress="1"/> <Transform android:elevation="4dp" /> </Constraint> </ConstraintSet> </MotionScene> Nested MotionLayout @xml/collapse_on_scroll_scene
158. </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end" app:deriveConstraintsFrom="@id/start"> <Constraint android:id="@id/header_layout"> <Layout android:layout_width="match_parent" android:layout_height="80dp" app:layout_constraintTop_toTopOf="parent" /> <PropertySet app:motionProgress="1"/> <Transform android:elevation="4dp" /> </Constraint> </ConstraintSet> </MotionScene> Nested MotionLayout @xml/collapse_on_scroll_scene
159. </ConstraintSet> <ConstraintSet android:id="@+id/end" app:deriveConstraintsFrom="@id/start"> <Constraint android:id="@id/header_layout"> <Layout android:layout_width="match_parent" android:layout_height="80dp" app:layout_constraintTop_toTopOf="parent" /> <PropertySet app:motionProgress="1"/> <Transform android:elevation="4dp" /> </Constraint> </ConstraintSet> </MotionScene> Nested MotionLayout @xml/collapse_on_scroll_scene
160. <MotionScene> <Transition app:constraintSetStart="@id/start" app:constraintSetEnd="@id/end" /> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/header_title"> <Layout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginBottom="16dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintBottom_toBottomOf="parent"/> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end" app:deriveConstraintsFrom="@id/start"> <Constraint android:id="@id/header_title"> <Transform android:scaleX="0.7" android:scaleY="0.7" Changing Text in MotionLayout @xml/collapsing_header_scene
161. tionScene> <Transition app:constraintSetStart="@id/start" app:constraintSetEnd="@id/end" /> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/header_title"> <Layout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginBottom="16dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintBottom_toBottomOf="parent"/> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end" app:deriveConstraintsFrom="@id/start"> <Constraint android:id="@id/header_title"> Changing Text in MotionLayout @xml/collapsing_header_scene
162. <Transition app:constraintSetStart="@id/start" app:constraintSetEnd="@id/end" /> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/header_title"> <Layout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginBottom="16dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintBottom_toBottomOf="parent"/> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end" app:deriveConstraintsFrom="@id/start"> <Constraint android:id="@id/header_title"> <Transform android:scaleX="0.7" Changing Text in MotionLayout @xml/collapsing_header_scene
163. <Transition app:constraintSetStart="@id/start" app:constraintSetEnd="@id/end" /> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/header_title"> <Layout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginBottom="16dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent"/> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end" app:deriveConstraintsFrom="@id/start"> <Constraint android:id="@id/header_title"> <Transform Changing Text in MotionLayout @xml/collapsing_header_scene As a bonus we can delete constraints when a view is using match_parent
164. <Transition app:constraintSetStart="@id/start" app:constraintSetEnd="@id/end" /> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@id/header_title"> <Layout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginBottom="16dp" app:layout_constraintBottom_toBottomOf="parent"/> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end" app:deriveConstraintsFrom="@id/start"> <Constraint android:id="@id/header_title"> <Transform android:scaleX="0.7" android:scaleY="0.7" Changing Text in MotionLayout @xml/collapsing_header_scene As a bonus we can delete constraints when a view is using match_parent
165. <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/thumbnail"> <PropertySet android:alpha="1" /> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/thumbnail"> <PropertySet android:alpha="0" /> </Constraint> <Constraint android:id="@id/header_title"> <Transform android:scaleX="0.7" android:scaleY="0.7" /> </Constraint> </ConstraintSet> @xml/collapsing_header_scene Visibility
166. <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/thumbnail"> <PropertySet android:alpha="1" /> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/thumbnail"> <PropertySet android:alpha="0" /> </Constraint> <Constraint android:id="@id/header_title"> <Transform android:scaleX="0.7" android:scaleY="0.7" /> </Constraint> </ConstraintSet> @xml/collapsing_header_scene Visibility
167. <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/thumbnail"> <PropertySet app:visibilityMode="ignore" android:alpha="1" /> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/thumbnail"> <PropertySet app:visibilityMode="ignore" android:alpha="0" /> </Constraint> <Constraint android:id="@id/header_title"> <Transform android:scaleX="0.7" android:scaleY="0.7" /> </Constraint> </ConstraintSet> @xml/collapsing_header_scene Visibility
168. <PropertySet app:visibilityMode="ignore" /> Visibility
169. <PropertySet app:visibilityMode="ignore|normal" /> Visibility normal is the default for all views in all constraints unless otherwise specified
170. Changing Constraints Programmatically • MotionLayout is just an extension of ConstraintLayout • After making changes to a ConstraintSet we must call motionLayout.updateState(constraintSetId, constraintSet) motionLayout.setTransition(start, end) motionLayout.transitionToEnd()
171. constraintSet.constrainWidth(viewId, boundaries.width) constraintSet.constrainHeight(viewId, boundaries.height) constraintSet.connect(viewId, TOP, R.id.boundaries, TOP, 0) constraintSet.connect(viewId, START, R.id.boundaries, START, 0) constraintSet.connect(viewId, END, R.id.boundaries, END, 0) constraintSet.connect(viewId, BOTTOM, R.id.boundaries, BOTTOM, 0) constraintSet.setElevation(view.id, 1f) motion_layout.updateState(R.id.zoomed_in, constraintSet) Changing Constraints Programmatically PhotoGridActivity.kt
172. constraintSet.constrainWidth(viewId, boundaries.width) constraintSet.constrainHeight(viewId, boundaries.height) constraintSet.connect(viewId, TOP, R.id.boundaries, TOP, 0) constraintSet.connect(viewId, START, R.id.boundaries, START, 0) constraintSet.connect(viewId, END, R.id.boundaries, END, 0) constraintSet.connect(viewId, BOTTOM, R.id.boundaries, BOTTOM, 0) constraintSet.setElevation(view.id, 1f) motion_layout.updateState(R.id.zoomed_in, constraintSet) Changing Constraints Programmatically PhotoGridActivity.kt
173. constraintSet.connect(viewId, TOP, R.id.boundaries, TOP, 0) constraintSet.connect(viewId, START, R.id.boundaries, START, 0) constraintSet.connect(viewId, END, R.id.boundaries, END, 0) constraintSet.connect(viewId, BOTTOM, R.id.boundaries, BOTTOM, 0) constraintSet.setElevation(view.id, 1f) motion_layout.updateState(R.id.zoomed_in, constraintSet) Changing Constraints Programmatically PhotoGridActivity.kt
174. <ConstraintSet android:id="@+id/grid" /> <ConstraintSet android:id="@+id/zoomed_in" /> constraintSet.connect(viewId, TOP, R.id.boundaries, TOP, 0) constraintSet.connect(viewId, START, R.id.boundaries, START, 0) constraintSet.connect(viewId, END, R.id.boundaries, END, 0) constraintSet.connect(viewId, BOTTOM, R.id.boundaries, BOTTOM, 0) constraintSet.setElevation(view.id, 1f) motion_layout.updateState(R.id.zoomed_in, constraintSet) Changing Constraints Programmatically PhotoGridActivity.kt @xml/grid_zoom_scene
175. <ConstraintSet android:id="@+id/grid" /> <ConstraintSet android:id="@+id/zoomed_in" /> constraintSet.connect(viewId, TOP, R.id.boundaries, TOP, 0) constraintSet.connect(viewId, START, R.id.boundaries, START, 0) constraintSet.connect(viewId, END, R.id.boundaries, END, 0) constraintSet.connect(viewId, BOTTOM, R.id.boundaries, BOTTOM, 0) constraintSet.setElevation(view.id, 1f) motion_layout.updateState(R.id.zoomed_in, constraintSet) Changing Constraints Programmatically PhotoGridActivity.kt @xml/grid_zoom_scene
176. RecyclerView & MotionLayout Placeholder • Calculate ViewHolder View position • Update a placeholder view within the starting ConstraintSet • Show hidden MotionLayout with placeholder
177. RecyclerView & MotionLayout Placeholder
178. AutoTransitions
179. • Previously the only option to turn on and off autoTransition was via reflection, but as of beta2 it is part of the Transition public API. • However I haven't found practical use cases for this yet... maybe you will! Changing Transitions on the fly
180. Debugging What state am I in? startState -> currentState -> endState
181. @layout/activity_main <androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="…" xmlns:app="…" android:id="@+id/progress_motion_layout" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/motion_scene" app:showPaths="true" app:motionDebug="SHOW_ALL" > Debugging
182. <Motion app:drawPath="..." /> Debugging
183. asConfigured rectangles deltaRelative
184. asConfigured rectangles deltaRelative
185. Debugging MotionExtensions.kt fun MotionLayout.needsTransition(destination: Int): Boolean { val end = endState return when (currentState) { // If moving, are we moving to the destination? -1 -> end != destination // Not yet moving startState -> true // If at the end state, did we get to the destination? end -> end != destination // Unknown state else -> false }
186. Debugging MotionExtensions.kt fun Int.resName(context: Context?): String { return if (this == -1) { "moving" } else try { context?.resources?.getResourceEntryName(this) ?: "unknown" } catch (ex: Throwable) { "unknown" } }
187. MotionExtensions.kt fun MotionLayout.after(completion: () -> Unit) { this.setTransitionListener(object: MotionLayout.TransitionListener { override fun onTransitionTrigger( layout: MotionLayout?, startId: Int, positive: Boolean, progress: Float) {} override fun onTransitionStarted( layout: MotionLayout?, startId: Int, endId: Int) { } override fun onTransitionChange( layout: MotionLayout?, startId: Int, endId: Int, progress: Float) { } Debugging
188. override fun onTransitionTrigger( layout: MotionLayout?, startId: Int, positive: Boolean, progress: Float) {} override fun onTransitionStarted( layout: MotionLayout?, startId: Int, endId: Int) { } override fun onTransitionChange( layout: MotionLayout?, startId: Int, endId: Int, progress: Float) { } override fun onTransitionCompleted( layout: MotionLayout?, currentId: Int) { completion() } // Already removed in beta2 release override fun allowsTransition(transition: MotionScene.Transition?): Boolean = true }) } Debugging
189. Constraints - Limitations • Some problems cannot be solved with derived Constraints. • Creating a very large number of ConstraintSets and Transitions is infeasible.
190. Constraints - Limitations N!/2 States Each requires a handwritten ConstraintSet This 2x2 board has 12 states A 3x3 board would have 181440 states
191. Constraints - Limitations
192. Other Practical Examples
193. Swiping Items with Collapsing Toolbar
194. Progress Indicator
195. ProgressBar
196. TabLayout & Many NestedScrollViews MainActivity.kt override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) view_pager?.apply { adapter = MainAdapter(supportFragmentManager) tab_layout?.setupWithViewPager(this) addOnPageChangeListener(object: ViewPager.OnPageChangeListener { override fun onPageScrollStateChanged(state: Int) {} override fun onPageScrolled(...) {} override fun onPageSelected(position: Int) { if (root_layout?.progress != 0f) { root_layout?.transitionToStart() } } }) } } internal fun onVerticalScroll(scroll: Int) { root_layout?.progress = Math.min(scroll / 1000f, 1f) }
197. Summary
198. Why You Should Try MotionLayout • Reduces context switching • Makes some hard animations much easier • Allows us to make animations reentrant, continuous, & smooth
199. Challenges in using MotionLayout • It’s still in beta • Lack of official learning materials • Debugging is a bit of trial and error https://codelabs.developers.google.com/codelabs/motion-layout/ But its so much easier now with MotionEditor
200. 11 MotionLayout in Hinge's production app Onboarding Flow
201. Questions? 11 MotionLayout in Hinge's production app Profile Flows
202. Questions? bit.ly/dcsf19-adv-motionlayout find me on Twitter / Github @kaeawc