Delight users with Motion Layout

A mix between the property animation framework, layout transitions with TransitionManager, and CoordinatorLayout; Motion Layout is the most powerful transition framework in Android yet.

Being fully declarative, you can use Motion Layout to build delightful animations and keep all the knowledge of layouts and their movements in just XML files.

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

Transcript

1. Delight users with Motion Layout Saurabh Arora Rakuten Viki @saurabh_arora90
2. Soompi is the world’s largest K-Pop and lifestyle editorial destination for breaking entertainment news, fashion & beauty articles, and exclusive events for international fans of Asian entertainment and culture. Viki is a global video platform, where millions of people watch and engage with their favorite TV shows, Viki Originals, movies, and influencer videos. VIDEO EDITORIAL
3. Delight users with Motion Layout Saurabh Arora Rakuten Viki @saurabh_arora90
4. Dev asked to work on tricky animations
5. Devs after motion layout
6. Constraint Layout • Complex layouts with a flat hierarchy • Specifying constraints on views w.r.t other views • Helpers such as Barriers, Groups & Guidelines
9. Constraint Layout Animations • Constraint sets • Start scene and an End scene • Use transition manager for smooth transition
10. private val start: ConstraintSet by lazy { val set = ConstraintSet() set.clone(this, R.layout.start) set }
11. 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 }
12. onClick() { TransitionManager.beginDelayedTransition(layoutRoot) end.applyTo(constraintLayoutRoot) }
14. Constraint Set
15. Constraint Set (Cons) • Multiple Layout files • Uninterruptible • Ignores style attributes
16. Motion Layout
17. Motion Layout • Introduced in ConstraintLayout 2.0 • Subclass of ConstraintLayout • Works with touch system • Support for intermediate states (keyframes) • Fully declarative
18. <?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>
19. <?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>
20. <?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>
21. Motion Scene Constraint Set Transition Constraints OnClick OnSwipe KeyFrame Set KeyPosition KeyAttribute
22. Constrains Layout Params Standard Attributes Visibility Alpha Custom Attributes Elevation Scale Rotation Translation • Setter • String, color, float,int or boolean
23. Examples
25. 01: Working with Constraints
26. <MotionScene> <ConstraintSet android:id="@+id/start"/> <ConstraintSet android:id="@+id/end"> </ConstraintSet> </MotionScene>
27. <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/ivSun"> <Layout android:layout_width="80dp" android:layout_height="80dp" app:layout_constraintBottom_toTopOf="@id/ivHouse" app:layout_constraintStart_toEndOf="parent" app:layout_constraintTop_toTopOf="@id/ivHouse" /> </Constraint> </ConstraintSet>
28. <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/ivMoon"> <Layout android:layout_width="80dp" android:layout_height="80dp" app:layout_constraintBottom_toTopOf="@id/ivHouse" app:layout_constraintStart_toStartOf="parent” /> <PropertySet android:alpha="1" /> </Constraint> </ConstraintSet>
29. <MotionScene ..> <ConstraintSet android:id="@+id/start” /> <ConstraintSet android:id="@+id/end" ../> </MotionScene>
30. <MotionScene ..> <Transition app:constraintSetEnd="@id/end" app:constraintSetStart="@id/start" > <OnSwipe app:touchAnchorId="@+id/ivSun" app:touchAnchorSide="left" app:dragDirection="dragRight" /> </Transition> <ConstraintSet android:id="@+id/start” /> <ConstraintSet android:id="@+id/end" ../> </MotionScene>
32. <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/ivSun"> <Layout android:layout_width="80dp" android:layout_height="80dp" app:layout_constraintBottom_toTopOf="@id/ivHouse" app:layout_constraintStart_toEndOf="parent" app:layout_constraintTop_toTopOf="@id/ivHouse" /> </Constraint> </ConstraintSet>
33. 02: Attributes
34. Constraints Constraint Layout Params Standard Attributes Visibility Alpha Custom Attributes Elevation Scale Rotation Translation • Reflection • String, color, float,int or boolean
35. <ConstraintSet android:id="@+id/end"> <Constraint android:id="@+id/ivSun"> ... <CustomAttribute app:attributeName="ColorFilter" app:customColorValue="#ef8e38" /> </Constraint> ... </ConstraintSet>
36. 03. Keyframes
37. Motion Scene Constraint Set Transition Constraints OnClick OnSwipe KeyFrame Set KeyPosition KeyAttribute
38. <Transition ...> <KeyFrameSet> <KeyPosition app:framePosition="30" app:keyPositionType="pathRelative" app:motionTarget="@id/ivSun" app:percentY="-0.25" /> </KeyFrameSet> </Transition>
39. <Transition ...> <KeyFrameSet> <KeyPosition app:framePosition="30" app:keyPositionType="pathRelative" app:motionTarget="@id/ivSun" app:percentY="-0.25" /> <KeyAttribute app:framePosition="30" android:alpha="1.0" app:motionTarget="@id/sky" /> </KeyFrameSet> </Transition>
40. <androidx.constraintlayout.motion.widget.MotionLayout ....... app:showPaths="true">
41. 04: Multiple Transitions
42. <MotionScene ...> <Transition .../> <Transition android:id="@+id/toSunrise" app:constraintSetEnd="@id/moon" app:constraintSetStart="@id/sunrise"> <OnSwipe app:touchAnchorId="@id/ivMoon" app:dragDirection="dragDown" app:touchAnchorSide="bottom" /> .... </Transition> </MotionScene>
43. 05: Motion Progress
44. }ViewPager
45. viewPager.addOnPageChangeListener(object : ViewPager.SimpleOnPageChangeListener() { override fun onPageScrolled(pos: Int, offset: Float, pixels: Int) { motionRoot.progress = (position + positionOffset) / (COUNT - 1) } })
48. }RecyclerView }AppBarLayout
49. <androidx.coordinatorlayout.widget.CoordinatorLayout> <com.google.android.material.appbar.AppBarLayout> <androidx.constraintlayout.motion.widget.MotionLayout app:layoutDescription="@xml/scene_file" 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>
50. AppBarLayout.addOnOffsetChangedListener(this) override fun onOffsetChanged(appBarLayout: AppBarLayout, verticalOffset: Int) { progress = -verticalOffset/appBarLayout.totalScrollRange.toFloat() }
51. 06: Other Examples
54. Recap • Part of constraint layout 2.0 • Works with both position/layout and styling attributes • Interruptible and can set progress • Click and Swipe Triggers
55. A mix between the property animation framework, layout transitions with TransitionManager, and CoordinatorLayout - Nicolas Roard
56. Devs after motion layout
57. Didn't cover • Auto Transition • Transition easing • KeyCycles and KeyTriggers
58. What’s next • Better Tooling • Motion editor
59. Resources • Google IO’19 Talk • Introduction to Motion Layout by Nicolas Roard • Github : MotionLayout-Playground : https://github.com/saurabharora90/MotionLayout-Playground
60. Saurabh Arora, Rakuten VIki @saurabh_arora90 Thank you!
61. Q&A