Production MotionLayout

I'm going be showing how to solve practical animation problems using MotionLayout. We'll start with an introduction to ConstraintSets, Transitions, and KeyFrames before exploring various experiments (swiping items in a list, creating a tile game, progress animations, RecyclerView placeholders). Lastly I want to share what we've learned from using these components in production.

Transcript

1. Production MotionLayout Jason Pearson NYC Android Developers Meetup - Jan 2020
4. @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 @kaeawc
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" app:layoutDescription="…" /> Creating our first MotionScene @layout/activity_main @kaeawc
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 Need to create a MotionScene @layout/activity_main @kaeawc
7. src/ ├── java/ └── res/ ├── drawable ├── layout │ └── ├── mipmap └── values Creating our first MotionScene activity_main.xml @kaeawc
8. Creating our first MotionScene src/ ├── java/ └── res/ ├── drawable ├── layout │ └── ├── mipmap ├── values └── xml activity_main.xml @kaeawc
9. src/ ├── java/ └── res/ ├── drawable ├── layout │ └── ├── mipmap ├── values └── xml └── motion_scene.xml activity_main.xml Creating our first MotionScene xml motion_scene @kaeawc
10. @xml/motion_scene <?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="…" xmlns:app="…" > </MotionScene> Creating our first MotionScene motion_scene xml @kaeawc
11. @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
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="@xml/motion_scene" /> Creating our first MotionScene @layout/activity_main
14. @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>
15. @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 @kaeawc
16. @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 @kaeawc
17. @xml/motion_scene <?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="…" xmlns:app="…" > </MotionScene> Adding first ConstraintSet @kaeawc
18. @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 @kaeawc
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 Omitting schemas from now on @kaeawc
20. @xml/motion_scene <MotionScene> <ConstraintSet android:id="@+id/start"> </ConstraintSet> </MotionScene> Adding first ConstraintSet @kaeawc
21. @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 @kaeawc
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 motion_scene.xml ConstraintSet start @kaeawc
23. <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 @kaeawc
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> <ConstraintSet android:id="@+id/end"> </ConstraintSet> </MotionScene> Adding second ConstraintSet @xml/motion_scene motion_scene.xml ConstraintSet start ConstraintSet end @kaeawc
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"> <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 @kaeawc
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 @kaeawc
27. @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 @kaeawc
28. @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 @kaeawc
29. @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 @kaeawc
30. @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 @kaeawc
31. @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 @kaeawc
32. @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 @kaeawc
33. @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 @kaeawc
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" motion_scene.xml Adding first Transition @xml/motion_scene ConstraintSet start ConstraintSet end Transition OnClick square start end @kaeawc
35. motion_scene.xml It works! " ConstraintSet start ConstraintSet end Transition OnClick square start end @kaeawc
36. @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> motion_scene.xml @xml/motion_scene ConstraintSet start ConstraintSet end OnClick Transition OnClick square start end @kaeawc
37. @xml/motion_scene <MotionScene> <Transition app:constraintSetStart="@id/start" app:constraintSetEnd="@id/end" > <OnClick app:targetId="@id/square" app:clickAction="toggle" /> </Transition> <ConstraintSet android:id="@+id/start" … /> <ConstraintSet android:id="@+id/end" … /> </MotionScene> motion_scene.xml @xml/motion_scene ConstraintSet start ConstraintSet end OnClick Transition OnClick square start end @kaeawc
38. @xml/motion_scene <OnClick app:targetId="@id/square" app:clickAction="toggle" /> OnClick motion_scene.xml ConstraintSet start ConstraintSet end Transition OnClick square start end @kaeawc
39. OnClick motion_scene_with_click.xml Transition OnClick square start end ConstraintSet start ConstraintSet end @kaeawc
40. 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 @kaeawc
41. Transition OnClick square start Transition end OnSwipe square start end OnSwipe OnClick @kaeawc
42. @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 @kaeawc
43. @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 @kaeawc
44. @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="bottom" app:dragDirection="dragDown" /> OnSwipe @kaeawc
45. @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="bottom" app:dragDirection="dragDown" /> OnSwipe @kaeawc
46. @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="bottom" app:dragDirection="dragDown" /> OnSwipe @kaeawc
47. @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="bottom" app:dragDirection="dragDown" /> OnSwipe @kaeawc
48. @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="bottom" app:dragDirection="dragDown" /> OnSwipe @kaeawc
49. @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="bottom" app:dragDirection="dragDown" /> OnSwipe @kaeawc
50. OnSwipe @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="bottom" app:dragDirection="dragDown" /> @kaeawc
51. OnSwipe @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="bottom" app:dragDirection="dragDown" /> @kaeawc
52. OnSwipe @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="bottom" app:dragDirection="dragDown" /> @kaeawc
53. OnSwipe @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="bottom" app:dragDirection="dragDown" /> @kaeawc
54. OnSwipe @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="bottom" app:dragDirection="dragDown" /> @kaeawc
55. OnSwipe @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="bottom" app:dragDirection="dragDown" /> @kaeawc
56. OnSwipe @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="top" app:dragDirection="dragDown" /> @kaeawc
57. OnSwipe @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="top" app:dragDirection="dragDown" /> @kaeawc
58. OnSwipe @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="top" app:dragDirection="dragDown" /> @kaeawc
59. OnSwipe @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="top" app:dragDirection="dragDown" /> @kaeawc
60. OnSwipe @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="top" app:dragDirection="dragDown" /> @kaeawc
61. OnSwipe @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="left" app:dragDirection="dragDown" /> @kaeawc
62. OnSwipe @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="left" app:dragDirection="dragDown" /> @kaeawc
63. OnSwipe @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="left" app:dragDirection="dragDown" /> @kaeawc
64. @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="left" app:dragDirection="dragDown" /> OnSwipe @kaeawc
65. @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="left" app:dragDirection="dragDown" /> OnSwipe @kaeawc
66. @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="left" app:dragDirection="dragRight" /> OnSwipe @kaeawc
67. @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="left" app:dragDirection="dragRight" /> OnSwipe @kaeawc
68. @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="left" app:dragDirection="dragRight" /> OnSwipe @kaeawc
69. @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="left" app:dragDirection="dragRight" /> OnSwipe @kaeawc
70. @xml/motion_scene_with_swipe <OnSwipe app:touchAnchorId="@id/square" app:touchAnchorSide="left" app:dragDirection="dragRight" /> OnSwipe @kaeawc
71. @xml/motion_scene_with_swipe <OnSwipe app:dragDirection="dragRight" /> OnSwipe @kaeawc
72. @xml/motion_scene_with_swipe <OnSwipe app:dragDirection="dragRight" /> OnSwipe @kaeawc
73. @xml/motion_scene_with_swipe <OnSwipe app:dragDirection="dragRight" /> OnSwipe @kaeawc
74. @xml/motion_scene_with_swipe <OnSwipe app:dragDirection="dragRight" /> OnSwipe @kaeawc
75. @xml/motion_scene_with_swipe <OnSwipe app:dragDirection="dragRight" app:onTouchUp="..." /> OnSwipe @kaeawc
76. autoComplete stop decelerate @kaeawc
77. @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 @kaeawc
78. @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 @kaeawc
79. @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 @kaeawc
80. 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
81. @xml/motion_scene <MotionScene> <Transition app:constraintSetStart="@id/start" app:constraintSetEnd="@id/end" app:motionInterpolator="easeInOut"a > <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 @kaeawc
82. easeInOut easeIn easeOut linear standard bounce cubic @xml/motion_scene <MotionScene> <Transition app:constraintSetStart="@id/start" app:constraintSetEnd="@id/end" app:motionInterpolator=" "a > <OnClick-…-/> </Transition> <ConstraintSet-android:id="@+id/start"> <Constraint-android:id="@id/square"> <Layout-…-/> Interpolation @kaeawc
83. easeInOut easeIn easeOut linear standard bounce cubic(0.42,0,1,1) app:motionInterpolator=" "a Interpolation @kaeawc
84. easeInOut easeIn easeOut linear standard bounce cubic(0.42,0,1,1) app:motionInterpolator=" "a Interpolation @kaeawc
85. easeInOut easeIn easeOut linear standard bounce cubic(0.42,0,1,1) app:motionInterpolator=" "a Interpolation @kaeawc
86. easeInOut easeIn easeOut linear standard bounce cubic(0.42,0,1,1) app:motionInterpolator=" "a Interpolation @kaeawc
87. easeInOut easeIn easeOut linear standard bounce cubic(0.42,0,1,1) app:motionInterpolator=" "a Interpolation @kaeawc
88. easeInOut easeIn easeOut linear standard bounce cubic(0.42,0,1,1) app:motionInterpolator=" "a Interpolation @kaeawc
89. easeInOut easeIn easeOut linear standard bounce cubic(0.42,0,1,1) app:motionInterpolator=" "a Interpolation @kaeawc
90. app:motionInterpolator="cubic(0.42,0,1,1)" https://cubic-bezier.com/#.42,0,1,1 Interpolation @kaeawc
91. Interpolation app:motionInterpolator="cubic(0.42,0,1,1)" https://cubic-bezier.com/#.42,0,1,1 @kaeawc
92. https://cubic-bezier.com/#.42,0,1,1
93. <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 @kaeawc
94. <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 @kaeawc
95. <ConstraintSet android:id="@+id/start" > <Constraint android:id="@id/square" > <Layout /> <PropertySet /> <Transform /> <Motion /> <CustomAttribute /> </Constraint> </ConstraintSet> Sub Elements @kaeawc
96. <PropertySet android:visibility="visible" android:alpha="1" app:visibilityMode="ignore" /> Sub Elements :-PropertySet @kaeawc
97. <PropertySet android:visibility="visible" android:alpha="1" app:visibilityMode="ignore" /> Sub Elements :-PropertySet @kaeawc
98. <Motion app:pathMotionArc="startHorizontal" /> <Motion app:pathMotionArc="startVertical" /> Sub Elements :-Motion @kaeawc
99. Linear Horizontal Vertical @kaeawc
100. Horizontal Linear Vertical @kaeawc
101. @xml/motion_scene <MotionScene> <Transition app:constraintSetStart="@id/start" app:constraintSetEnd="@id/end" app:motionInterpolator="standard" > <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 @kaeawc
102. <Transition app:constraintSetStart="@id/start" app:constraintSetEnd="@id/end" app:motionInterpolator="standard" > <OnClick-…-/> </Transition> <ConstraintSet-android:id="@+id/start"> <Constraint-android:id="@id/square"> <Layout-…-/> <Motion-app:transitionEasing="standard"> </Constraint> <Constraint-android:id="@id/otherSquare"> <Layout-…-/> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end"-…-/> </MotionScene> Sub Elements :-Motion @xml/motion_scene @kaeawc
103. <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 @kaeawc
104. swiping_scene.xml Sub Elements: Transform ConstraintSet start ConstraintSet end Transition toggle OnClick square start end @kaeawc
105. swiping_scene.xml Sub Elements: Transform ConstraintSet start ConstraintSet end Transition toggle OnClick square start end Transform @kaeawc
106. swiping_scene.xml Sub Elements: Transform ConstraintSet start ConstraintSet end Transition toggle OnClick square start end Transform rotate 360 @kaeawc
107. swiping_scene.xml Sub Elements: Transform ConstraintSet start ConstraintSet end Transition toggle OnClick square start end Transform rotate 360 rotateX 360 @kaeawc
108. swiping_scene.xml Sub Elements: Transform ConstraintSet start ConstraintSet end Transition toggle OnClick square start end Transform rotate 360 rotateX 360 @kaeawc
109. Sub Elements: Transform swiping_scene.xml ConstraintSet start ConstraintSet end Transition toggle OnClick square start end Transform rotate 360 rotateX 360 @kaeawc
110. Sub Elements: Transform swiping_scene.xml ConstraintSet start ConstraintSet end Transition toggle OnClick square start end KeyFrameSet Transform rotate 360 rotateX 360 @kaeawc
111. 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 @kaeawc
112. 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 @kaeawc
113. KeyFrameSet KeyFrameSets @kaeawc
114. KeyFrameSet KeyFrameSets @kaeawc
115. KeyFrameSets KeyFrameSet KeyFrames let you specify a change at a point in time during transition @kaeawc
116. KeyFrameSets KeyFrameSet KeyFrames let you specify a change at a point in time during transition @kaeawc
117. KeyFrameSets KeyFrameSet 100 0 25 50 75 KeyFrames let you specify a change at a point in time during transition @kaeawc
118. KeyFrameSets KeyFrameSet 100 0 25 50 75 KeyFrames let you specify a change at a point in time during transition @kaeawc
119. KeyFrameSets KeyFrameSet 100 0 25 50 75 KeyFrames let you specify a change at a point in time during transition @kaeawc
120. KeyFrameSets KeyFrameSet 100 0 25 50 75 KeyFrames let you specify a change at a point in time during transition @kaeawc
121. KeyFrameSets KeyFrameSet 100 0 25 50 75 KeyFrames let you specify a change at a point in time during transition @kaeawc
122. <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 @kaeawc
123. <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 @kaeawc
124. <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 @kaeawc
125. <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 @kaeawc
126. 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> @kaeawc
127. KeyFrameSets: Key Attribute <Transition> <KeyFrameSet> <KeyAttribute /> <KeyPosition /> <KeyCycle /> <KeyTimeCycle /> </KeyFrameSet> </Transition> @kaeawc
128. Practical Examples
129. Swipe To Reveal Action in a List @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" /> @kaeawc
130. @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" /> Swipe To Reveal Action in a List @kaeawc
131. @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 Swipe To Reveal Action in a List @kaeawc
132. <MotionScene> <Transition app:constraintSetStart="@id/start" app:constraintSetEnd="@id/end" > <OnSwipe app:touchAnchorId="@id/foreground" app:touchAnchorSide="right" app:dragDirection="dragLeft" app:onTouchUp="decelerate" /> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/foreground"> <Transform android:translationY="0dp" /> @xml/swipe_item_scene Swipe To Reveal Action in a List @kaeawc
133. <MotionScene> <Transition app:constraintSetStart="@id/start" app:constraintSetEnd="@id/end" > <OnSwipe app:touchAnchorId="@id/foreground" app:touchAnchorSide="right" app:dragDirection="dragLeft" app:onTouchUp="decelerate" /> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/foreground"> <Transform android:translationY="0dp" /> @xml/swipe_item_scene Swipe To Reveal Action in a List @kaeawc
134. <MotionScene> <Transition app:constraintSetStart="@id/start" app:constraintSetEnd="@id/end" > <OnSwipe app:touchAnchorId="@id/foreground" app:touchAnchorSide="right" app:dragDirection="dragLeft" app:onTouchUp="decelerate" /> </Transition> <ConstraintSet android:id="@+id/start"> <Constraint android:id="@+id/foreground"> <Transform android:translationY="0dp" /> @xml/swipe_item_scene Swipe To Reveal Action in a List @kaeawc
135. Swipe To Reveal @kaeawc
136. Swipe To Reveal @kaeawc
137. Swipe To Reveal @kaeawc
138. 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 Swipe To Reveal @kaeawc
139. Swipe To Reveal @kaeawc
140. Swipe To Reveal @kaeawc
141. Swipe To Reveal @kaeawc
142. Swipe To Reveal @kaeawc
143. Swipe To Reveal @kaeawc
144. <OnSwipe app:touchAnchorId="@id/foreground" app:touchAnchorSide="right" app:dragDirection="dragLeft" /> Swipe To Reveal Action in a List @kaeawc
145. <OnSwipe app:dragDirection="dragLeft" /> Or do not specify a touchAnchor and then there is no need to create clever hidden views. Swipe To Reveal Action in a List @kaeawc
146. 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> @kaeawc
147. 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> @kaeawc
148. Collapsing Toolbar @xml/collapse_on_scroll_scene <MotionScene> <Transition … /> <ConstraintSet android:id="@+id/start" … /> <ConstraintSet android:id="@+id/end" … /> </MotionScene> @kaeawc
149. <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 @kaeawc
150. 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 @kaeawc
151. 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 @kaeawc
152. Nested MotionLayout @kaeawc
153. @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 @kaeawc
154. @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 @kaeawc
155. <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 @kaeawc
156. <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 @kaeawc
157. 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> @kaeawc
158. <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 @kaeawc
159. <ConstraintSet android:id="@+id/start" > <Constraint android:id="@id/sample_t <Transform android:scaleX="1" android:scaleY="1" /> </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end" > <Constraint android:id="@id/sample_t <Transform android:scaleX="0.5" android:scaleY="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 @kaeawc
160. textSize via CustomAttribute scaleX&Y via Transform @kaeawc
161. <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 @kaeawc
162. <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 @kaeawc
163. <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 @kaeawc
164. <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 @kaeawc
165. </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 @kaeawc
166. </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 @kaeawc
167. <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 @kaeawc
168. 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 @kaeawc
169. <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 @kaeawc
170. <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 @kaeawc
171. <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 @kaeawc
172. 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() @kaeawc
173. <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 @kaeawc
174. RecyclerView & MotionLayout Placeholder • Calculate ViewHolder View position • Update a placeholder view within the starting ConstraintSet • Show hidden MotionLayout with placeholder @kaeawc
175. RecyclerView & MotionLayout Placeholder @kaeawc
176. AutoTransitions @kaeawc
177. Changing Transitions on the fly
179. Constraints - Limitations • Some problems cannot be solved with derived Constraints. • Creating a very large number of ConstraintSets and Transitions is infeasible. @kaeawc
180. Constraints - Limitations N!/2 States Each requires a handwritten ConstraintSet This 2x2 board has 12 states A 3x3 board would have 181440 states @kaeawc
181. Constraints - Limitations @kaeawc
182. Other Practical Examples
183. Swiping Items with Collapsing Toolbar @kaeawc
184. Progress Indicator @kaeawc
185. ProgressBar @kaeawc
186. 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) } @kaeawc
187. Summary
188. Why You Should Try MotionLayout • Reduces context switching • Makes some hard animations much easier • Allows us to make animations reentrant, continuous, & smooth @kaeawc
189. 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 @kaeawc
190. 11 MotionLayout in Hinge's production app Onboarding Flow @kaeawc
191. Questions? 11 MotionLayout in Hinge's production app Profile Flows @kaeawc
192. Questions? bit.ly/prod-motionlayout-nyc-meetup-jan-2020 find me on Twitter / Github @kaeawc