Introduction to Motion Layout

If you want to have a look at the animations, then the slides are also available at: http://bit.ly/2QtY3hr

MotionLayout is a new class available in the ConstraintLayout 2.0 library to help Android developers manage motion and widget animation in their application. In this talk, we’ll explore how you can very easily build complex layout animations and motion handling through simple XML code.

Github repository: https://github.com/saurabharora90/MotionLayout-Playground

Transcript

1. Introduction to Motion Layout Saurabh Arora Rakuten Viki @saurabh_arora90
2. Dev asked to work on animations
3. Devs after motion layout
4. Constraint Layout • Complex layouts with a flat hierarchy • Specifying constraints on views w.r.t other views • Helpers such as Barriers, Groups & Guidelines
7. Constraint Set • Create another layout file with end state • Pick constraints from end state layout file • Apply constraints to constraint layout • Use transition manager for smooth transition
8. private val start: ConstraintSet by lazy { val set = ConstraintSet() set.clone(this, R.layout.start) set }
9. private val start: ConstraintSet by lazy { val set = ConstraintSet() set.clone(this, R.layout.start) set } private val end: ConstraintSet by lazy { val set = ConstraintSet() set.clone(this, R.layout.end) set }
10. onClick() { TransitionManager.beginDelayedTransition(layoutRoot) end.applyTo(constraintLayoutRoot) }
12. Constraint Set
13. Constraint Set (Cons) • Uninterruptible • Multiple Layout files • Ignores style attributes
14. Motion Layout
15. Motion Layout • Introduced in ConstraintLayout 2.0 • Subclass of ConstraintLayout • Works with touch system • Support for intermediate states (keyframes) • Fully declarative
16. <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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"> ....... </androidx.constraintlayout.widget.ConstraintLayout>
17. <?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"> ....... </androidx.constraintlayout.motion.widget.MotionLayout>
18. <?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/scene_01"> ....... </androidx.constraintlayout.motion.widget.MotionLayout>
19. Motion Scene Constraint Set Transition Constraints Attributes OnClick OnSwipe KeyFrame Set KeyPosition KeyAttribute
20. Attribute Constraint Layout Params Standard Attributes Visibility Alpha Custom Attributes Elevation Scale Rotation Translation • Reflection • String, color, float,int or boolean
21. Examples
22. 01: Migrate from Constraint Set​
23. private val start: ConstraintSet by lazy { val set = ConstraintSet() set.clone(this, R.layout.start) set } private val end: ConstraintSet by lazy { val set = ConstraintSet() set.clone(this, R.layout.end) set } ....... TransitionManager.beginDelayedTransition(layoutRoot) end.applyTo(layoutRoot)
24. <?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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"> ....... </androidx.constraintlayout.widget.ConstraintLayout>
25. <?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"> ....... </androidx.constraintlayout.motion.widget.MotionLayout>
26. <?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/scene_01"> ....... </androidx.constraintlayout.motion.widget.MotionLayout>
27. <?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <Transition app:constraintSetStart="@layout/start" app:constraintSetEnd="@layout/end"> </Transition> </MotionScene>
28. <?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <Transition app:constraintSetStart="@layout/start" app:constraintSetEnd="@layout/end"> <OnSwipe app:touchAnchorId="@+id/ivSun" app:touchAnchorSide="bottom"/> </Transition> </MotionScene>
29. <?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <Transition app:constraintSetStart="@layout/start" app:constraintSetEnd="@layout/end"> <OnSwipe app:touchAnchorId="@+id/ivSun" app:touchAnchorSide="bottom" app:dragDirection="dragRight"/> </Transition> </MotionScene>
31. <?xml version="1.0" encoding="utf-8"?> <MotionScene xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <Transition app:constraintSetStart="@layout/start" app:constraintSetEnd="@layout/end"> <OnSwipe app:touchAnchorId="@+id/ivSun" app:touchAnchorSide="bottom" app:dragDirection="dragRight"/> </Transition> </MotionScene>
32. 02: Self Contained Scene
33. <MotionScene .... > <Transition app:constraintSetStart="@layout/start" app:constraintSetEnd="@layout/end"> <OnSwipe app:touchAnchorId="@+id/ivSun" app:touchAnchorSide="bottom" app:dragDirection="dragRight"/> </Transition> </MotionScene>
34. <MotionScene .... > <Transition app:constraintSetStart="@layout/start" app:constraintSetEnd="@id/end"> <OnSwipe app:touchAnchorId="@+id/ivSun" app:touchAnchorSide="bottom" app:dragDirection="dragRight"/> </Transition> </MotionScene>
35. <MotionScene ...> <Transition> ..... </Transition> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/ivSun" android:layout_width="80dp" android:layout_height="80dp" app:layout_constraintStart_toEndOf="parent"/> <Constraint android:id="@+id/ivMoon" android:layout_width="80dp" android:layout_height="80dp" app:layout_constraintEnd_toEndOf="parent" /> .... </ConstraintSet>
37. <MotionScene ...> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/ivSun" android:layout_width="80dp" android:layout_height="80dp" app:layout_constraintTop_toTopOf="@id/ivHouse" app:layout_constraintTop_toBottomOf="@id/ivHouse" app:layout_constraintStart_toEndOf="parent"/> .... </ConstraintSet>
38. <MotionScene ...> <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/ivSun" android:layout_width="80dp" android:layout_height="80dp" android:elevation="1dp" app:layout_constraintTop_toTopOf="@id/ivHouse" app:layout_constraintTop_toBottomOf="@id/ivHouse" app:layout_constraintStart_toEndOf="parent"/> .... </ConstraintSet>
39. 03: Attributes
40. Attribute Constraint Layout Params Standard Attributes Visibility Alpha Custom Attributes Elevation Scale Rotation Translation • Reflection • String, color, float,int or boolean
41. Custom Attributes • Call "set"Name method via reflection • Case sensitive. • Supports color, string, int, float, boolean & dimension
42. <Constraint android:id="@+id/ivSun" android:layout_width="80dp" android:layout_height="80dp" android:elevation="1dp" app:layout_constraintTop_toTopOf="@id/ivHouse" app:layout_constraintTop_toBottomOf="@id/ivHouse" app:layout_constraintStart_toEndOf="parent"> </Constraint>
43. <Constraint android:id="@+id/ivSun" android:layout_width="80dp" android:layout_height="80dp" android:elevation="1dp" android:rotation="180" app:layout_constraintTop_toTopOf="@id/ivHouse" app:layout_constraintTop_toBottomOf="@id/ivHouse" app:layout_constraintStart_toEndOf="parent"> <CustomAttribute app:attributeName="ColorFilter" app:customColorValue="#ef8e38" /> </Constraint>
45. 04. Keyframes
46. Motion Scene Constraint Set Transition Constraints Attributes OnClick OnSwipe KeyFrame Set KeyPosition KeyAttribute
48. <Transition app:constraintSetStart="@+id/start" app:constraintSetEnd="@+id/end"> <OnSwipe app:dragDirection="dragRight" app:touchAnchorSide="left" app:touchAnchorId="@+id/ivSun"/> </Transition> <Constraint android:id="@+id/ivSun" .... />
49. <Transition app:constraintSetStart="@+id/start" app:constraintSetEnd="@+id/end"> <OnSwipe app:dragDirection="dragRight" app:touchAnchorSide="left" app:touchAnchorId="@+id/ivSun"/> <KeyFrameSet> </KeyFrameSet> </Transition> <Constraint android:id="@+id/ivSun" .... />
50. <Transition app:constraintSetStart="@+id/start" app:constraintSetEnd="@+id/end"> <OnSwipe app:dragDirection="dragRight" app:touchAnchorSide="left" app:touchAnchorId="@+id/ivSun"/> <KeyFrameSet> <KeyPosition app:target="@id/ivSun"/> </KeyFrameSet> </Transition> <Constraint android:id="@+id/ivSun" .... />
51. <Transition app:constraintSetStart="@+id/start" app:constraintSetEnd="@+id/end"> <OnSwipe app:dragDirection="dragRight" app:touchAnchorSide="left" app:touchAnchorId="@+id/ivSun"/> <KeyFrameSet> <KeyPosition app:target="@id/ivSun" app:framePosition="50" app:percentY="-0.25" app:keyPositionType="pathRelative"/> </KeyFrameSet> </Transition> <Constraint android:id="@+id/ivSun" .... />
53. Motion Scene Constraint Set Transition Constraints Attributes OnClick OnSwipe KeyFrame Set KeyPosition KeyAttribute
54. <Transition> <KeyFrameSet> <KeyPosition app:target="@id/ivSun" app:framePosition="50" app:percentY="-0.25" app:keyPositionType="pathRelative"/> </KeyFrameSet> </Transition>
55. <Transition> <KeyFrameSet> <KeyPosition app:target="@id/ivSun" app:framePosition="50" app:percentY="-0.25" app:keyPositionType="pathRelative"/> <KeyAttribute app:target="@id/nightSky" app:framePosition="70" android:alpha="0.2"/> </KeyFrameSet> </Transition>
56. <Transition> <KeyFrameSet> <KeyPosition app:target="@id/ivSun" app:framePosition="50" app:percentY="-0.25" app:keyPositionType="pathRelative"/> <KeyAttribute app:target="@id/nightSky" app:framePosition="70" android:alpha="0.2"/> <KeyAttribute app:target="@id/ivSun" app:framePosition="75" android:alpha="0.8"/> </KeyFrameSet> </Transition>
58. <androidx.constraintlayout.motion. widget.MotionLayout ....... app:showPaths="true">
59. 05: Motion Progress
60. }ViewPager
61. viewPager.addOnPageChangeListener(object : ViewPager.SimpleOnPageChangeListener() { })
62. viewPager.addOnPageChangeListener(object : ViewPager.SimpleOnPageChangeListener() { override fun onPageScrolled(pos: Int, offset: Float, pixels: Int) { } })
63. viewPager.addOnPageChangeListener(object : ViewPager.SimpleOnPageChangeListener() { override fun onPageScrolled(pos: Int, offset: Float, pixels: Int) { motionRoot.progress = (position + positionOffset) / (COUNT - 1) } })
66. }RecyclerView }AppBarLayout
67. <androidx.coordinatorlayout.widget.CoordinatorLayout> </androidx.coordinatorlayout.widget.CoordinatorLayout>
68. <androidx.coordinatorlayout.widget.CoordinatorLayout> <com.google.android.material.appbar.AppBarLayout> </com.google.android.material.appbar.AppBarLayout> </androidx.coordinatorlayout.widget.CoordinatorLayout>
69. <androidx.coordinatorlayout.widget.CoordinatorLayout> <com.google.android.material.appbar.AppBarLayout> <androidx.constraintlayout.motion.widget.MotionLayout app:layoutDescription="@xml/scene_06" app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"> ............ </androidx.constraintlayout.motion.widget.MotionLayout> </com.google.android.material.appbar.AppBarLayout> </androidx.coordinatorlayout.widget.CoordinatorLayout>
70. <androidx.coordinatorlayout.widget.CoordinatorLayout> <com.google.android.material.appbar.AppBarLayout> <androidx.constraintlayout.motion.widget.MotionLayout app:layoutDescription="@xml/scene_06" app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"> ............ </androidx.constraintlayout.motion.widget.MotionLayout> </com.google.android.material.appbar.AppBarLayout> <androidx.recyclerview.widget.RecyclerView app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </androidx.coordinatorlayout.widget.CoordinatorLayout>
71. AppBarLayout.addOnOffsetChangedListener(this) override fun onOffsetChanged(appBarLayout: AppBarLayout, verticalOffset: Int) { }
72. AppBarLayout.addOnOffsetChangedListener(this) override fun onOffsetChanged(appBarLayout: AppBarLayout, verticalOffset: Int) { progress = -verticalOffset / appBarLayout.totalScrollRange.toFloat() }
74. Recap • Part of constraint layout 2.0 - alpha release • Works with both position/layout and styling attributes • Interruptible and can set progress
75. A mix between the property animation framework, layout transitions with TransitionManager, and CoordinatorLayout - Nicolas Roard
76. Devs after motion layout
77. Didn't cover • States and Variants • Transition easing • KeyCycles
78. What’s next • Better Tooling • Motion editor
79. Resources • Google IO'18 Talk • Introduction to Motion Layout by Nicolas Roard • Github : MotionLayout-Playground : https://github.com/saurabharora90/MotionLayout-Playground
80. Saurabh Arora, Rakuten VIki @saurabh_arora90 Thank you!
81. Q&A Follow the sli.do link in the hall to ask questions