Advanced & Practical MotionLayout

This talk covers how to practically approach and use MotionLayout to deliver on complex design asks. This will cover reusing Constraints between multiple Transitions, 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 @kaeawc bit.ly/advanced-motionlayout-talk
2. Agenda • Quick Introduction • Provide answers to two questions: - What can MotionLayout do? - Why is this useful to you & your team?
3. –Jinyan Cao @ Robinhood May 22, 2017 "ConstraintLayout seems to be the hot new thing nowadays. Flattening your view hierarchy, improving performance, supporting arbitrary bounding rules..." "... one other benefit of ConstraintLayout that most people are unaware of and the official documentation curiously doesn’t mention anything about: performing cool animations on your ConstraintLayout views with very little code."
4. –Jinyan Cao @ Robinhood May 22, 2017 "ConstraintLayout seems to be the hot new thing nowadays. Flattening your view hierarchy, improving performance, supporting arbitrary bounding rules..." "... one other benefit of ConstraintLayout that most people are unaware of and the official documentation curiously doesn’t mention anything about: performing cool animations on your ConstraintLayout views with very little code."
5. ConstraintLayout Animations @layout/activity_main <androidx.constraintlayout.widget.ConstraintLayout android:id=“@+id/root_view” > <View android:id="@id/square" android:layout_width="100dp" android:layout_height="100dp" android:background="@color/indigo" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
6. ConstraintLayout Animations @layout/activity_main <androidx.constraintlayout.widget.ConstraintLayout android:id=“@+id/root_view” > <View android:id="@id/square" android:layout_width="100dp" android:layout_height="100dp" android:background="@color/indigo" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
7. ConstraintLayout Animations @layout/activity_main <androidx.constraintlayout.widget.ConstraintLayout android:id=“@+id/root_view” > <View android:id="@id/square" android:layout_width="100dp" android:layout_height="100dp" android:background="@color/indigo" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
8. ConstraintLayout Animations @layout/activity_main <androidx.constraintlayout.widget.ConstraintLayout android:id=“@+id/root_view” > <View android:id="@id/square" android:layout_width="100dp" android:layout_height="100dp" android:background="@color/indigo" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
9. ConstraintLayout Animations @layout/activity_main <androidx.constraintlayout.widget.ConstraintLayout android:id=“@+id/root_view” > <View android:id="@id/square" android:layout_width="100dp" android:layout_height="100dp" android:background="@color/indigo" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
10. @layout/activity_main MainActivity.kt fun onClicked() { ConstraintSet().apply { constrainWidth(square.id, 100.dp()) constrainHeight(square.id, 100.dp()) connect(square.id, START, 0, START, 0) connect(square.id, END, 0, END, 0) connect(square.id, BOTTOM, 0, BOTTOM, 0) applyTo(root_view) } }
11. @layout/activity_main MainActivity.kt fun onClicked() { TransitionManager.beginDelayedTransition(root_view) ConstraintSet().apply { constrainWidth(square.id, 100.dp()) constrainHeight(square.id, 100.dp()) connect(square.id, START, 0, START, 0) connect(square.id, END, 0, END, 0) connect(square.id, BOTTOM, 0, BOTTOM, 0) applyTo(root_view) } }
12. @layout/activity_main MainActivity.kt fun onClicked() { TransitionManager.beginDelayedTransition(root_view) ConstraintSet().apply { constrainWidth(square.id, 100.dp()) constrainHeight(square.id, 100.dp()) connect(square.id, START, 0, START, 0) connect(square.id, END, 0, END, 0) connect(square.id, BOTTOM, 0, BOTTOM, 0) applyTo(root_view) } }
13. @layout/activity_main MainActivity.kt fun onClicked() { TransitionManager.beginDelayedTransition(root_view) ConstraintSet().apply { load(baseContext, R.layout.keyframe_two) applyTo(root_view) } }
14. What is MotionLayout? • Extended class of ConstraintLayout • Library of helper functions to coordinate animation
15. @layout/activity_main <androidx.constraintlayout.widget.ConstraintLayout android:id="@+id/root_view" > <View android:id="@id/square" android:layout_width="100dp" android:layout_height="100dp" android:background="@color/indigo" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout> What is MotionLayout?
16. @layout/activity_main <androidx.constraintlayout.widget.ConstraintLayout android:id="@+id/root_view" > <View android:id="@id/square" android:layout_width="100dp" android:layout_height="100dp" android:background="@color/indigo" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout> What is MotionLayout?
17. @layout/activity_main <androidx.constraintlayout.motion.widget.MotionLayout android:id="@+id/root_view" app:layoutDescription="@xml/motion_scene" > <View android:id="@id/square" android:layout_width="100dp" android:layout_height="100dp" android:background="@color/indigo" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" /> </androidx.constraintlayout.motion.widget.MotionLayout> What is MotionLayout?
18. <androidx.constraintlayout.motion.widget.MotionLayout android:id="@+id/root_view" app:layoutDescription="@xml/motion_scene" > What is MotionLayout?
19. <androidx.constraintlayout.motion.widget.MotionLayout android:id="@+id/root_view" app:layoutDescription="@xml/motion_scene" >
20. @xml/motion_scene
21. <?xml version="1.0" encoding="utf-8"?> <MotionScene> <ConstraintSet android:id="@+id/start"/> <Constraint android:id="@id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> </MotionScene> @xml/motion_scene
22. <MotionScene> <ConstraintSet android:id="@+id/start"/> <Constraint android:id="@id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"/> <Constraint android:id="@id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" /> </ConstraintSet> </MotionScene> @xml/motion_scene
23. <ConstraintSet android:id="@+id/start"/> <Constraint android:id="@id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"/> <Constraint android:id="@id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" /> </ConstraintSet> @xml/motion_scene
24. <ConstraintSet android:id="@+id/start"/> <Constraint android:id="@id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"/> <Constraint android:id="@id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" /> </ConstraintSet> @xml/motion_scene
25. <ConstraintSet android:id="@+id/start"/> <Constraint android:id="@id/square" app:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"/> <Constraint android:id="@id/square" app:layout_constraintBottom_toBottomOf="parent" /> </ConstraintSet> @xml/motion_scene
26. <Transition motion:constraintSetStart="@+id/start" motion:constraintSetEnd="@+id/end" > <ConstraintSet android:id="@+id/start"/> <Constraint android:id="@id/square" app:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"/> <Constraint android:id="@id/square" app:layout_constraintBottom_toBottomOf="parent" /> </ConstraintSet> @xml/motion_scene
27. <Transition motion:constraintSetStart="@id/start" motion:constraintSetEnd="@id/end" > <OnClick /> </Transition> <ConstraintSet android:id="@+id/start"/> <Constraint android:id="@id/square" app:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"/> <Constraint android:id="@id/square" app:layout_constraintBottom_toBottomOf="parent" /> </ConstraintSet> @xml/motion_scene
28. <Transition motion:constraintSetStart="@id/start" motion:constraintSetEnd="@id/end" > <OnClick motion:targetId="@id/square" motion:clickAction="toggle" /> </Transition> <ConstraintSet android:id="@+id/start"/> <Constraint android:id="@id/square" app:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"/> <Constraint android:id="@id/square" app:layout_constraintBottom_toBottomOf="parent" /> </ConstraintSet> @xml/motion_scene
29. <Transition motion:constraintSetStart="@id/start" motion:constraintSetEnd="@id/end" > <OnClick motion:targetId="@id/square" motion:clickAction="toggle" /> </Transition> <ConstraintSet android:id="@+id/start"/> <Constraint android:id="@id/square" app:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"/> <Constraint android:id="@id/square" app:layout_constraintBottom_toBottomOf="parent" /> </ConstraintSet> @xml/motion_scene
30. <Transition motion:constraintSetStart="@id/start" motion:constraintSetEnd="@id/end" > <OnClick motion:targetId="@id/square" motion:clickAction="toggle" /> </Transition> <ConstraintSet android:id="@+id/start"/> <Constraint android:id="@id/square" app:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"/> <Constraint android:id="@id/square" app:layout_constraintBottom_toBottomOf="parent" /> </ConstraintSet> @xml/motion_scene
31. <Transition motion:constraintSetStart="@id/start" motion:constraintSetEnd="@id/end" > <OnClick motion:targetId="@id/square" motion:clickAction="toggle" /> </Transition> <ConstraintSet android:id="@+id/start"/> <Constraint android:id="@id/square" app:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end"/> <Constraint android:id="@id/square" app:layout_constraintBottom_toBottomOf="parent" /> </ConstraintSet> @xml/motion_scene
32. Constraints
33. Derived ConstraintSets • Introduced in ConstraintLayout 2.0 alpha 5
34. Derived ConstraintSets @xml/motion_scene <MotionScene> <ConstraintSet android:id="@+id/start" > <Constraint android:id="@id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> </MotionScene>
35. @xml/motion_scene <ConstraintSet android:id="@+id/start" > <Constraint android:id="@id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" /> </ConstraintSet>
36. @xml/motion_scene <ConstraintSet android:id="@+id/start" > <Constraint android:id="@id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end" > <Constraint android:id="@id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" /> </ConstraintSet>
37. @xml/motion_scene <ConstraintSet android:id="@+id/start" > <Constraint android:id="@id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end" > <Constraint android:id="@id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" /> </ConstraintSet>
38. @xml/motion_scene <ConstraintSet android:id="@+id/start" > <Constraint android:id="@id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/middle" > <Constraint android:id="@id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end" > <Constraint android:id="@id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" /> </ConstraintSet>
39. @xml/motion_scene <ConstraintSet android:id="@+id/start" > <Constraint android:id="@id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/middle" app:deriveConstraintsFrom="@id/start" > <Constraint android:id="@id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end" app:deriveConstraintsFrom="@id/middle" > <Constraint android:id="@id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" />
40. @xml/motion_scene <ConstraintSet android:id="@+id/start" > <Constraint android:id="@id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/middle" app:deriveConstraintsFrom="@id/start" > <Constraint android:id="@id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/end" app:deriveConstraintsFrom="@id/middle" > <Constraint android:id="@id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintBottom_toBottomOf="parent" /> </ConstraintSet>
41. @xml/motion_scene <ConstraintSet android:id="@+id/start" > <Constraint android:id="@id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/middle" app:deriveConstraintsFrom="@id/start" > <Constraint android:id="@id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" > <Transform android:rotate="45" > </Constraint> </ConstraintSet> <ConstraintSet android:id="@+id/end" app:deriveConstraintsFrom="@id/middle" > <Constraint android:id="@id/square" android:layout_width="100dp" android:layout_height="100dp" app:layout_constraintBottom_toBottomOf="parent" /> </ConstraintSet>
42. @xml/motion_scene <Transition motion:constraintSetStart="@id/start" motion:constraintSetEnd="@id/middle" > </Transition> <ConstraintSet android:id="@+id/start" .../> <ConstraintSet android:id="@+id/middle" .../> <ConstraintSet android:id="@+id/end" .../>
43. @xml/motion_scene <Transition motion:constraintSetStart="@id/start" motion:constraintSetEnd="@id/middle" > <OnSwipe motion:touchAnchorId="@id/square" motion:touchAnchorSide="top" motion:dragDirection="dragDown" /> </Transition> <ConstraintSet android:id="@+id/start" .../> <ConstraintSet android:id="@+id/middle" .../> <ConstraintSet android:id="@+id/end" .../>
44. @xml/motion_scene <Transition motion:constraintSetStart="@id/start" motion:constraintSetEnd="@id/middle" > <OnSwipe motion:touchAnchorId="@id/square" motion:touchAnchorSide="top" motion:dragDirection="dragDown" /> </Transition> <ConstraintSet android:id="@+id/start" .../> <ConstraintSet android:id="@+id/middle" .../> <ConstraintSet android:id="@+id/end" .../>
45. @xml/motion_scene <Transition motion:constraintSetStart="@id/start" motion:constraintSetEnd="@id/middle" > <OnSwipe motion:touchAnchorId="@id/square" motion:touchAnchorSide="top" motion:dragDirection="dragDown" /> </Transition> <ConstraintSet android:id="@+id/start" .../> <ConstraintSet android:id="@+id/middle" .../> <ConstraintSet android:id="@+id/end" .../>
46. @xml/motion_scene <Transition motion:constraintSetStart="@id/start" motion:constraintSetEnd="@id/middle" > <OnSwipe motion:touchAnchorId="@id/square" motion:touchAnchorSide="top" motion:dragDirection="dragDown" /> </Transition> <ConstraintSet android:id="@+id/start" .../> <ConstraintSet android:id="@+id/middle" .../> <ConstraintSet android:id="@+id/end" .../>
47. @xml/motion_scene <Transition motion:constraintSetStart="@id/start" motion:constraintSetEnd="@id/middle" > <OnSwipe motion:touchAnchorId="@id/square" motion:touchAnchorSide="top" motion:dragDirection="dragDown" /> </Transition> <ConstraintSet android:id="@+id/start" .../> <ConstraintSet android:id="@+id/middle" .../> <ConstraintSet android:id="@+id/end" .../>
48. @xml/motion_scene <Transition motion:constraintSetStart="@id/start" motion:constraintSetEnd="@id/middle" > <OnSwipe motion:touchAnchorId="@id/square" motion:touchAnchorSide="top" motion:dragDirection="dragDown" /> </Transition> <ConstraintSet android:id="@+id/start" .../> <ConstraintSet android:id="@+id/middle" .../> <ConstraintSet android:id="@+id/end" .../>
49. @xml/motion_scene <Transition motion:constraintSetStart="@id/start" motion:constraintSetEnd="@id/middle" > <OnSwipe motion:touchAnchorId="@id/square" motion:touchAnchorSide="top" motion:dragDirection="dragDown" /> </Transition> <Transition motion:constraintSetStart="@id/middle" motion:constraintSetEnd="@id/end" > <OnSwipe motion:touchAnchorId="@id/square" motion:touchAnchorSide="top" motion:dragDirection="dragDown" /> </Transition> <ConstraintSet android:id="@+id/start" .../> <ConstraintSet android:id="@+id/middle" .../> <ConstraintSet android:id="@+id/end" .../>
50. @xml/motion_scene <Transition motion:constraintSetStart="@id/start" motion:constraintSetEnd="@id/middle" .../> <Transition motion:constraintSetStart="@id/middle" motion:constraintSetEnd="@id/end" .../> <ConstraintSet android:id="@+id/start" .../> <!-- 45* rotation !--> <ConstraintSet android:id="@+id/middle" .../> <ConstraintSet android:id="@+id/end" .../>
51. Constraints • ConstraintLayout bounds can position or resize child views. • There are other Sub Elements that can be applied within a Constraint.
52. @xml/motion_scene <ConstraintSet android:id="@+id/start" > <Constraint android:id="@id/square" > <Layout android:layout_width="150dp" /> <PropertySet android:alpha="1" /> <Transform android:translationX="36dp" /> <Motion app:pathMotionArc="startHorizontal" /> </ConstraintSet> </ConstraintSet> Constraints - Sub Elements
53. @xml/motion_scene <ConstraintSet android:id="@+id/start" > <Constraint android:id="@id/square" > <Layout android:layout_width="150dp" /> <PropertySet android:alpha="1" /> <Transform android:translationX="36dp" /> <Motion app:pathMotionArc="startHorizontal" /> </ConstraintSet> </ConstraintSet> Constraints - Sub Elements
54. @xml/motion_scene <ConstraintSet android:id="@+id/start" > <Constraint android:id="@id/square" > <Motion app:pathMotionArc="startHorizontal" /> </ConstraintSet> </ConstraintSet> Constraints - Path Motion Arc
55. @xml/motion_scene <Motion app:pathMotionArc="startHorizontal" /> Constraints - Path Motion Arc
56. @xml/motion_scene <Motion app:pathMotionArc="startVertical" /> Constraints - Path Motion Arc
57. Constraints - Progress • PropertySet sub element allows a parent to pass its progress to a child MotionLayout • app:motionProgress
58. @xml/header_scene <MotionScene> <ConstraintSet android:id="@+id/start" > <Constraint android:id="@id/header_title" > <PropertySet android:scaleX="1.0" android:scaleY="1.0" /> </ConstraintSet> </ConstraintSet> </MotionScene> Constraints - Progress
59. @xml/header_scene <MotionScene> <ConstraintSet android:id="@+id/start" > <Constraint android:id="@id/header_title" > <PropertySet android:scaleX="1.0" android:scaleY="1.0" /> </ConstraintSet> </ConstraintSet> <ConstraintSet android:id="@+id/end" > <Constraint android:id="@id/header_title" > <PropertySet android:scaleX="0.7" android:scaleY="0.7" /> </ConstraintSet> </ConstraintSet> </MotionScene> Constraints - Progress
60. @xml/header_scene Constraints - Progress
61. @xml/header_scene @xml/scrolling_scene Constraints - Progress
62. @xml/header_scene @xml/scrolling_scene <ConstraintSet android:id="@+id/expanded" > <Constraint android:id="@id/header_view" android:layout_width="0dp" android:layout_height="104dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" /> <Constraint android:id="@id/recycler_view" android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toBottomOf="@id/header_view" app:layout_constraintBottom_toBottomOf="parent" /> </ConstraintSet> Constraints - Progress
63. @xml/header_scene @xml/scrolling_scene <ConstraintSet android:id="@+id/expanded" > <Constraint android:id="@id/header_view" android:layout_width="match_parent" android:layout_height="104dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" /> <Constraint android:id="@id/recycler_view" android:layout_width="match_parent" android:layout_height="0dp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toBottomOf="@id/header_view" app:layout_constraintBottom_toBottomOf="parent" /> </ConstraintSet> Constraints - Progress
64. @xml/header_scene @xml/scrolling_scene <ConstraintSet android:id="@+id/expanded" > <Constraint android:id="@id/header_view" android:layout_width="match_parent" android:layout_height="104dp" app:layout_constraintTop_toTopOf="parent" /> <Constraint android:id="@id/recycler_view" android:layout_width="match_parent" android:layout_height="0dp" app:layout_constraintTop_toBottomOf="@id/header_view" app:layout_constraintBottom_toBottomOf="parent" /> </ConstraintSet> Constraints - Progress
65. @xml/header_scene @xml/scrolling_scene <ConstraintSet android:id="@+id/expanded" > <Constraint android:id="@id/header_view" android:layout_width="match_parent" android:layout_height="104dp" app:layout_constraintTop_toTopOf="parent" /> <Constraint android:id="@id/recycler_view" android:layout_width="match_parent" android:layout_height="0dp" app:layout_constraintTop_toBottomOf="@id/header_view" app:layout_constraintBottom_toBottomOf="parent" /> </ConstraintSet> Constraints - Progress
66. @xml/header_scene @xml/scrolling_scene <ConstraintSet android:id="@+id/expanded" > <Constraint android:id="@id/header_view" android:layout_width="match_parent" android:layout_height="104dp" app:layout_constraintTop_toTopOf="parent" /> <Constraint android:id="@id/recycler_view" android:layout_width="match_parent" android:layout_height="0dp" app:layout_constraintTop_toBottomOf="@id/header_view" app:layout_constraintBottom_toBottomOf="parent" /> </ConstraintSet> Constraints - Progress
67. @xml/header_scene @xml/scrolling_scene <ConstraintSet android:id="@+id/expanded" > <Constraint android:id="@id/header_view" android:layout_width="match_parent" android:layout_height="104dp" app:layout_constraintTop_toTopOf="parent" /> <Constraint android:id="@id/recycler_view" android:layout_width="match_parent" android:layout_height="0dp" app:layout_constraintTop_toBottomOf="@id/header_view" app:layout_constraintBottom_toBottomOf="parent" /> </ConstraintSet> Constraints - Progress
68. @xml/header_scene @xml/scrolling_scene <ConstraintSet android:id="@+id/expanded" > <Constraint android:id="@id/header_view" android:layout_width="match_parent" android:layout_height="104dp" app:layout_constraintTop_toTopOf="parent" /> <Constraint android:id="@id/recycler_view" android:layout_width="match_parent" android:layout_height="0dp" app:layout_constraintTop_toBottomOf="@id/header_view" app:layout_constraintBottom_toBottomOf="parent" /> </ConstraintSet>
69. @xml/header_scene @xml/scrolling_scene <ConstraintSet android:id="@+id/expanded" > <Constraint android:id="@id/header_view" android:layout_width="match_parent" android:layout_height="104dp" app:layout_constraintTop_toTopOf="parent" /> <Constraint android:id="@id/recycler_view" android:layout_width="match_parent" android:layout_height="0dp" app:layout_constraintTop_toBottomOf="@id/header_view" app:layout_constraintBottom_toBottomOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/collapsed" > <Constraint android:id="@id/header_view" android:layout_width="match_parent" android:layout_height="56dp" app:layout_constraintTop_toTopOf="parent" /> <Constraint android:id="@id/recycler_view" android:layout_width="match_parent" android:layout_height="0dp" app:layout_constraintTop_toBottomOf="@id/header_view" app:layout_constraintBottom_toBottomOf="parent" /> </ConstraintSet>
70. @xml/header_scene @xml/scrolling_scene <ConstraintSet android:id="@+id/expanded" > <Constraint android:id="@id/header_view" android:layout_width="match_parent" android:layout_height="104dp" app:layout_constraintTop_toTopOf="parent" /> <Constraint android:id="@id/recycler_view" android:layout_width="match_parent" android:layout_height="0dp" app:layout_constraintTop_toBottomOf="@id/header_view" app:layout_constraintBottom_toBottomOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/collapsed" app:deriveConstraintsFrom="@+id/expanded" > <Constraint android:id="@id/header_view" android:layout_width="match_parent" android:layout_height="56dp" app:layout_constraintTop_toTopOf="parent" /> </ConstraintSet>
71. @xml/header_scene @xml/scrolling_scene <ConstraintSet android:id="@+id/expanded" > <Constraint android:id="@id/header_view" android:layout_width="match_parent" android:layout_height="104dp" app:layout_constraintTop_toTopOf="parent" /> <Constraint android:id="@id/recycler_view" android:layout_width="match_parent" android:layout_height="0dp" app:layout_constraintTop_toBottomOf="@id/header_view" app:layout_constraintBottom_toBottomOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/collapsed" app:deriveConstraintsFrom="@+id/expanded" > <Constraint android:id="@id/header_view" android:layout_width="match_parent" android:layout_height="56dp" app:layout_constraintTop_toTopOf="parent" /> </ConstraintSet>
72. @xml/header_scene @xml/scrolling_scene <ConstraintSet android:id="@+id/expanded" > <Constraint android:id="@id/header_view" android:layout_width="match_parent" android:layout_height="104dp" app:layout_constraintTop_toTopOf="parent" > <PropertySet android:motionProgress="0" /> </Constraint> <Constraint android:id="@id/recycler_view" android:layout_width="match_parent" android:layout_height="0dp" app:layout_constraintTop_toBottomOf="@id/header_view" app:layout_constraintBottom_toBottomOf="parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/collapsed" app:deriveConstraintsFrom="@+id/expanded" > <Constraint android:id="@id/header_view" android:layout_width="match_parent" android:layout_height="56dp" app:layout_constraintTop_toTopOf="parent"> <PropertySet android:motionProgress="1" /> </Constraint> </ConstraintSet>
73. @xml/header_scene @xml/scrolling_scene <ConstraintSet android:id="@+id/expanded" > <Constraint android:id="@id/header_view" > <PropertySet android:motionProgress="0" /> </Constraint> <Constraint android:id="@id/recycler_view" /> </ConstraintSet> <ConstraintSet android:id="@+id/collapsed" app:deriveConstraintsFrom="@+id/expanded" > <Constraint android:id="@id/header_view" > <PropertySet android:motionProgress="1" /> </Constraint> </ConstraintSet>
74. Constraints - Changing Programmatically • MotionLayout is just an extension of ConstraintLayout • After making changes to a ConstraintSet we must call MotionLayout.updateState(stateId, constraintSet)
75. Constraints - Changing Programmatically MainActivity.kt 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)
76. MainActivity.kt 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) @xml/motion_scene <ConstraintSet android:id="@+id/grid" /> <ConstraintSet android:id="@+id/zoomed_in" />
77. MainActivity.kt 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) @xml/motion_scene <ConstraintSet android:id="@+id/grid" /> <ConstraintSet android:id="@+id/zoomed_in" />
78. Constraints - Limitations • Some problems cannot be solved with derived Constraints. • Creating a very large number of ConstraintSets and Transitions is infeasible.
79. Constraints - Limitations N!/2 States Each requires a handwritten ConstraintSet This 2x2 board has 12 states A 3x3 board would have 181440 states
80. Constraints - Limitations
81. Transitions
82. autoTransition property • Can specify whether to animate or jump to the start or end of a transition
83. autoTransition property
84. @xml/motion_scene <Transition app:constraintSetStart="@id/rotate_2" app:constraintSetEnd="@id/full_1" app:autoTransition="animateToEnd" app:duration="250" app:motionInterpolator="easeOut" > <KeyFrameSet> <KeyAttribute app:motionTarget="@id/glass_top" app:framePosition="100" android:rotation="-360" /> <KeyAttribute app:motionTarget="@id/glass_bottom" app:framePosition="100" android:rotation="-360" /> </KeyFrameSet> </Transition> autoTransition property
85. @xml/motion_scene <Transition app:constraintSetStart="@id/rotate_2" app:constraintSetEnd="@id/full_1" app:autoTransition="animateToEnd" app:duration="250" app:motionInterpolator="easeOut" > <KeyFrameSet> <KeyAttribute app:motionTarget="@id/glass_top" app:framePosition="100" android:rotation="-360" /> <KeyAttribute app:motionTarget="@id/glass_bottom" app:framePosition="100" android:rotation="-360" /> </KeyFrameSet> </Transition> KeyFrameSet in Transitions
86. @xml/motion_scene <Transition app:constraintSetStart="@id/rotate_2" app:constraintSetEnd="@id/full_1" app:autoTransition="animateToEnd" app:duration="250" app:motionInterpolator="easeOut" > <KeyFrameSet> <KeyAttribute app:motionTarget="@id/glass_top" app:framePosition="100" android:rotation="-360" /> <KeyAttribute app:motionTarget="@id/glass_bottom" app:framePosition="100" android:rotation="-360" /> </KeyFrameSet> </Transition> KeyFrameSet in Transitions
87. @xml/motion_scene <Transition app:constraintSetStart="@id/rotate_2" app:constraintSetEnd="@id/full_1" app:autoTransition="animateToEnd" app:duration="250" app:motionInterpolator="easeOut" > <KeyFrameSet> <KeyAttribute app:motionTarget="@id/glass_top" app:framePosition="100" android:rotation="-360" /> <KeyAttribute app:motionTarget="@id/glass_bottom" app:framePosition="100" android:rotation="-360" /> </KeyFrameSet> </Transition> KeyFrameSet in Transitions
88. @xml/motion_scene <Transition app:constraintSetStart="@id/rotate_2" app:constraintSetEnd="@id/full_1" app:autoTransition="animateToEnd" app:duration="250" app:motionInterpolator="easeOut" > <KeyFrameSet> <KeyAttribute app:motionTarget="@id/glass_top" app:framePosition="100" android:rotation="-360" /> <KeyAttribute app:motionTarget="@id/glass_bottom" app:framePosition="100" android:rotation="-360" /> </KeyFrameSet> </Transition> KeyFrameSet in Transitions
89. @xml/motion_scene <Transition app:constraintSetStart="@id/rotate_2" app:constraintSetEnd="@id/full_1" app:autoTransition="animateToEnd" app:duration="250" app:motionInterpolator="easeOut" > <KeyFrameSet> <KeyAttribute app:motionTarget="@id/glass_top" app:framePosition="100" android:rotation="-360" /> <KeyAttribute app:motionTarget="@id/glass_bottom" app:framePosition="100" android:rotation="-360" /> </KeyFrameSet> </Transition> KeyFrameSet in Transitions
90. @xml/motion_scene app:motionInterpolator="easeOut" Interpolators in Transitions
91. @xml/motion_scene app:motionInterpolator="cubic(0.4,0,1,1)" Interpolators in Transitions
92. @xml/motion_scene app:motionInterpolator="cubic(0.4,0,1,1)" https://cubic-bezier.com/#.42,0,1,1 Interpolators in Transitions
93. @xml/motion_scene app:motionInterpolator="cubic(0.4,0,1,1)" https://cubic-bezier.com/#.42,0,1,1 Interpolators in Transitions
94. Changing Transitions on the fly • Only current option to turn on and off autoTransition is via reflection. • I've opened an issue on ConstraintLayout requesting access to programmatically modify this flag.
95. Changing Transitions on the fly • Only current option to turn on and off autoTransition is via reflection. • I've opened an issue on ConstraintLayout requesting access to programmatically modify this flag.
96. Changing Transitions on the fly
97. MotionLayout + RecyclerView
98. MotionLayout & RecyclerView • ConstraintLayout team has demoed their own placeholder implementation that uses RecyclerView.Adapter, but it's not yet available. • I've opted to programmatically manipulate ConstraintSets & Transitions to achieve a similar placeholder behavior.
99. @xml/placeholder_scene <ConstraintSet android:id="@+id/scrolling" > <Constraint android:id="@id/placeholder" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" > <PropertySet android:elevation="0dp" app:visibilityMode="ignore" /> </Constraint> <Constraint android:id="@id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" /> </ConstraintSet> MotionLayout & RecyclerView
100. @xml/placeholder_scene <ConstraintSet android:id="@+id/scrolling" > <Constraint android:id="@id/placeholder" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" > <PropertySet android:elevation="0dp" app:visibilityMode="ignore" /> </Constraint> <Constraint android:id="@id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" /> </ConstraintSet> MotionLayout & RecyclerView
101. @xml/placeholder_scene <ConstraintSet android:id="@+id/scrolling" > <Constraint android:id="@id/placeholder" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" > <PropertySet android:elevation="0dp" app:visibilityMode="ignore" /> </Constraint> <Constraint android:id="@id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" /> </ConstraintSet> MotionLayout & RecyclerView
102. @xml/placeholder_scene <ConstraintSet android:id="@+id/scrolling" > <Constraint android:id="@id/placeholder" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" > <PropertySet android:elevation="0dp" app:visibilityMode="ignore" /> </Constraint> <Constraint android:id="@id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" /> </ConstraintSet> MotionLayout & RecyclerView
103. @xml/placeholder_scene <ConstraintSet android:id="@+id/scrolling" > <Constraint android:id="@id/placeholder" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" > <PropertySet android:elevation="0dp" app:visibilityMode="ignore" /> </Constraint> <Constraint android:id="@id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" /> </ConstraintSet> MotionLayout & RecyclerView
104. @xml/placeholder_scene <ConstraintSet android:id="@+id/scrolling" > <Constraint android:id="@id/placeholder" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" > <PropertySet android:elevation="0dp" app:visibilityMode="ignore" /> </Constraint> <Constraint android:id="@id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/selected" app:deriveConstraintsFrom="@id/start" > <Constraint android:id="@id/placeholder" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" > <PropertySet android:elevation="1dp" app:visibilityMode="ignore" /> </Constraint> </ConstraintSet> MotionLayout & RecyclerView
105. app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" > <PropertySet android:elevation="0dp" app:visibilityMode="ignore" /> </Constraint> <Constraint android:id="@id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/selected" app:deriveConstraintsFrom="@id/start" > <Constraint android:id="@id/placeholder" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" > <PropertySet android:elevation="1dp" app:visibilityMode="ignore" /> </Constraint> </ConstraintSet> MotionLayout & RecyclerView
106. app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" > <PropertySet android:elevation="0dp" app:visibilityMode="ignore" /> </Constraint> <Constraint android:id="@id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" /> </ConstraintSet> <ConstraintSet android:id="@+id/selected" app:deriveConstraintsFrom="@id/start" > <Constraint android:id="@id/placeholder" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" > <PropertySet android:elevation="1dp" app:visibilityMode="ignore" /> </Constraint> </ConstraintSet> MotionLayout & RecyclerView
107. motion_layout?.apply { val cs = getConstraintSet(R.id.scrolling) cs?.constrainWidth(placeholder.id, MATCH_PARENT) cs?.constrainHeight(placeholder.id, WRAP_CONTENT) if (topOffset > 0) { cs?.setMargin(placeholder.id, TOP, placeholderTop) cs?.setMargin(placeholder.id, BOTTOM, 0) cs?.setVerticalBias(placeholder.id, 0f) } else { cs?.setMargin(placeholder.id, BOTTOM, placeholderBottom) cs?.setMargin(placeholder.id, TOP, 0) cs?.setVerticalBias(placeholder.id, 1f) } cs?.connect(placeholder.id, START, parentId, START, startMargin) cs?.connect(placeholder.id, END, parentId, END, startMargin) updateState(R.id.scrolling, cs) setTransition(R.id.scrolling, R.id.selected) placeholder?.isVisible = true transitionToEnd() } MotionLayout & RecyclerView
108. val cs = getConstraintSet(R.id.scrolling) cs?.constrainWidth(placeholder.id, MATCH_PARENT) cs?.constrainHeight(placeholder.id, WRAP_CONTENT) if (topOffset > 0) { cs?.setMargin(placeholder.id, TOP, placeholderTop) cs?.setMargin(placeholder.id, BOTTOM, 0) cs?.setVerticalBias(placeholder.id, 0f) } else { cs?.setMargin(placeholder.id, BOTTOM, placeholderBottom) cs?.setMargin(placeholder.id, TOP, 0) cs?.setVerticalBias(placeholder.id, 1f) } cs?.connect(placeholder.id, START, parentId, START, startMargin) cs?.connect(placeholder.id, END, parentId, END, startMargin) updateState(R.id.scrolling, cs) setTransition(R.id.scrolling, R.id.selected) placeholder?.isVisible = true transitionToEnd() MotionLayout & RecyclerView
109. val cs = getConstraintSet(R.id.scrolling) cs?.constrainWidth(placeholder.id, MATCH_PARENT) cs?.constrainHeight(placeholder.id, WRAP_CONTENT) if (topOffset > 0) { cs?.setMargin(placeholder.id, TOP, placeholderTop) cs?.setMargin(placeholder.id, BOTTOM, 0) cs?.setVerticalBias(placeholder.id, 0f) } else { cs?.setMargin(placeholder.id, BOTTOM, placeholderBottom) cs?.setMargin(placeholder.id, TOP, 0) cs?.setVerticalBias(placeholder.id, 1f) } cs?.connect(placeholder.id, START, parentId, START, startMargin) cs?.connect(placeholder.id, END, parentId, END, startMargin) updateState(R.id.scrolling, cs) setTransition(R.id.scrolling, R.id.selected) placeholder?.isVisible = true transitionToEnd() MotionLayout & RecyclerView
110. val cs = getConstraintSet(R.id.scrolling) cs?.constrainWidth(placeholder.id, MATCH_PARENT) cs?.constrainHeight(placeholder.id, WRAP_CONTENT) if (topOffset > 0) { cs?.setMargin(placeholder.id, TOP, placeholderTop) cs?.setMargin(placeholder.id, BOTTOM, 0) cs?.setVerticalBias(placeholder.id, 0f) } else { cs?.setMargin(placeholder.id, BOTTOM, placeholderBottom) cs?.setMargin(placeholder.id, TOP, 0) cs?.setVerticalBias(placeholder.id, 1f) } cs?.connect(placeholder.id, START, parentId, START, startMargin) cs?.connect(placeholder.id, END, parentId, END, startMargin) updateState(R.id.scrolling, cs) setTransition(R.id.scrolling, R.id.selected) placeholder?.isVisible = true transitionToEnd() MotionLayout & RecyclerView
111. val cs = getConstraintSet(R.id.scrolling) cs?.constrainWidth(placeholder.id, MATCH_PARENT) cs?.constrainHeight(placeholder.id, WRAP_CONTENT) if (topOffset > 0) { cs?.setMargin(placeholder.id, TOP, placeholderTop) cs?.setMargin(placeholder.id, BOTTOM, 0) cs?.setVerticalBias(placeholder.id, 0f) } else { cs?.setMargin(placeholder.id, BOTTOM, placeholderBottom) cs?.setMargin(placeholder.id, TOP, 0) cs?.setVerticalBias(placeholder.id, 1f) } cs?.connect(placeholder.id, START, parentId, START, startMargin) cs?.connect(placeholder.id, END, parentId, END, startMargin) updateState(R.id.scrolling, cs) setTransition(R.id.scrolling, R.id.selected) placeholder?.isVisible = true transitionToEnd() MotionLayout & RecyclerView
112. cs?.constrainHeight(placeholder.id, WRAP_CONTENT) if (topOffset > 0) { cs?.setMargin(placeholder.id, TOP, placeholderTop) cs?.setMargin(placeholder.id, BOTTOM, 0) cs?.setVerticalBias(placeholder.id, 0f) } else { cs?.setMargin(placeholder.id, BOTTOM, placeholderBottom) cs?.setMargin(placeholder.id, TOP, 0) cs?.setVerticalBias(placeholder.id, 1f) } cs?.connect(placeholder.id, START, parentId, START, startMargin) cs?.connect(placeholder.id, END, parentId, END, startMargin) updateState(R.id.scrolling, cs) setTransition(R.id.scrolling, R.id.selected) placeholder?.isVisible = true transitionToEnd() MotionLayout & RecyclerView
113. cs?.setVerticalBias(placeholder.id, 0f) } else { cs?.setMargin(placeholder.id, BOTTOM, placeholderBottom) cs?.setMargin(placeholder.id, TOP, 0) cs?.setVerticalBias(placeholder.id, 1f) } cs?.connect(placeholder.id, START, parentId, START, startMargin) cs?.connect(placeholder.id, END, parentId, END, startMargin) updateState(R.id.scrolling, cs) setTransition(R.id.scrolling, R.id.selected) placeholder?.isVisible = true transitionToEnd() MotionLayout & RecyclerView
114. MotionLayout & RecyclerView
115. Summary
116. Why You Should Try MotionLayout • Reduces context switching • Makes some hard animations much easier • Allows us to make animations reentrant, continuous, & smooth - Watch Nick Butcher's I/O 2019 Motional Intelligence
117. Challenges in using MotionLayout • It’s still in beta • Lack of learning materials • Debugging is a bit of trial and error - waiting for highly anticipated MotionEditor
118. Can we use it with Jetpack Compose? NOT YET Should we ever use Coordinator Layout again? NO Physics based Transitions? NOT YET Is Hinge hiring? YES
119. Questions? Is Hinge hiring? YES bit.ly/advanced-motionlayout-talk