Tweet
Tweet

Slide 1

Slide 1 text

Advanced & Practical MotionLayout Jason Pearson droidcon SF 2019

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Basics First

Slide 5

Slide 5 text

@layout/activity_main Creating our first MotionScene

Slide 6

Slide 6 text

@layout/activity_main Creating our first MotionScene @layout/activity_main

Slide 7

Slide 7 text

@layout/activity_main Creating our first MotionScene Need to create a MotionScene @layout/activity_main

Slide 8

Slide 8 text

src/ ├── java/ └── res/ ├── drawable ├── layout │ └── ├── mipmap └── values Creating our first MotionScene activity_main.xml

Slide 9

Slide 9 text

Creating our first MotionScene src/ ├── java/ └── res/ ├── drawable ├── layout │ └── ├── mipmap ├── values └── xml activity_main.xml

Slide 10

Slide 10 text

src/ ├── java/ └── res/ ├── drawable ├── layout │ └── ├── mipmap ├── values └── xml └── motion_scene.xml activity_main.xml Creating our first MotionScene xml motion_scene

Slide 11

Slide 11 text

@xml/motion_scene Creating our first MotionScene motion_scene xml

Slide 12

Slide 12 text

@xml/motion_scene @layout/activity_main Creating our first MotionScene @layout/activity_main

Slide 13

Slide 13 text

@xml/motion_scene @layout/activity_main Creating our first MotionScene @layout/activity_main

Slide 14

Slide 14 text

@xml/motion_scene @layout/activity_main Creating our first MotionScene @layout/activity_main

Slide 15

Slide 15 text

@layout/activity_main @layout/activity_main Creating our first MotionScene @xml/motion_scene

Slide 16

Slide 16 text

@layout/activity_main Adding first child to MotionScene

Slide 17

Slide 17 text

@layout/activity_main Adding first child to MotionScene

Slide 18

Slide 18 text

@xml/motion_scene Adding first ConstraintSet

Slide 19

Slide 19 text

@xml/motion_scene Adding first ConstraintSet

Slide 20

Slide 20 text

@xml/motion_scene Adding first ConstraintSet Omitting schemas from now on

Slide 21

Slide 21 text

@xml/motion_scene Adding first ConstraintSet

Slide 22

Slide 22 text

@xml/motion_scene Adding first ConstraintSet @xml/motion_scene

Slide 23

Slide 23 text

@xml/motion_scene Adding first ConstraintSet @xml/motion_scene motion_scene.xml ConstraintSet start

Slide 24

Slide 24 text

Adding second ConstraintSet @xml/motion_scene motion_scene.xml ConstraintSet start

Slide 25

Slide 25 text

Adding second ConstraintSet @xml/motion_scene motion_scene.xml ConstraintSet start ConstraintSet end

Slide 26

Slide 26 text

Adding second ConstraintSet @xml/motion_scene motion_scene.xml ConstraintSet start ConstraintSet end

Slide 27

Slide 27 text

Adding second ConstraintSet @xml/motion_scene motion_scene.xml ConstraintSet start ConstraintSet end

Slide 28

Slide 28 text

@xml/motion_scene

Slide 29

Slide 29 text

@xml/motion_scene

Slide 30

Slide 30 text

@xml/motion_scene Adding first Transition @xml/motion_scene motion_scene.xml ConstraintSet start ConstraintSet end Transition start

Slide 31

Slide 31 text

@xml/motion_scene Adding first Transition @xml/motion_scene motion_scene.xml ConstraintSet start ConstraintSet end Transition start end

Slide 32

Slide 32 text

@xml/motion_scene

Slide 33

Slide 33 text

@xml/motion_scene

Slide 34

Slide 34 text

@xml/motion_scene

Slide 35

Slide 35 text

@xml/motion_scene

Slide 36

Slide 36 text

It works! "
 
 motion_scene.xml ConstraintSet start ConstraintSet end Transition OnClick square start end

Slide 37

Slide 37 text

@xml/motion_scene @xml/motion_scene motion_scene.xml ConstraintSet start ConstraintSet end Transition OnClick square start end OnClick

Slide 38

Slide 38 text

OnClick @xml/motion_scene motion_scene.xml ConstraintSet start ConstraintSet end Transition OnClick square start end

Slide 39

Slide 39 text

@xml/motion_scene OnClick motion_scene.xml ConstraintSet start ConstraintSet end Transition OnClick square start end

Slide 40

Slide 40 text

@xml/motion_scene OnClick motion_scene.xml ConstraintSet start ConstraintSet end Transition OnClick square start end

Slide 41

Slide 41 text

@xml/motion_scene OnClick motion_scene.xml ConstraintSet start ConstraintSet end Transition OnClick square start end

Slide 42

Slide 42 text

OnClick motion_scene_with_click.xml Transition OnClick square start end ConstraintSet start ConstraintSet end

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Transition OnClick square start Transition end OnSwipe square start end OnSwipe OnClick

Slide 45

Slide 45 text

@xml/motion_scene_with_swipe @xml/motion_scene_with_click @xml/motion_scene_with_click @xml/motion_scene_with_swipe OnSwipe OnClick

Slide 46

Slide 46 text

@xml/motion_scene_with_swipe @xml/motion_scene_with_click OnSwipe OnClick @xml/motion_scene_with_click @xml/motion_scene_with_swipe

Slide 47

Slide 47 text

@xml/motion_scene_with_swipe OnSwipe

Slide 48

Slide 48 text

@xml/motion_scene_with_swipe OnSwipe

Slide 49

Slide 49 text

@xml/motion_scene_with_swipe OnSwipe

Slide 50

Slide 50 text

@xml/motion_scene_with_swipe OnSwipe

Slide 51

Slide 51 text

@xml/motion_scene_with_swipe OnSwipe

Slide 52

Slide 52 text

@xml/motion_scene_with_swipe OnSwipe

Slide 53

Slide 53 text

OnSwipe @xml/motion_scene_with_swipe

Slide 54

Slide 54 text

OnSwipe @xml/motion_scene_with_swipe

Slide 55

Slide 55 text

OnSwipe @xml/motion_scene_with_swipe

Slide 56

Slide 56 text

OnSwipe @xml/motion_scene_with_swipe

Slide 57

Slide 57 text

OnSwipe @xml/motion_scene_with_swipe

Slide 58

Slide 58 text

OnSwipe @xml/motion_scene_with_swipe

Slide 59

Slide 59 text

OnSwipe @xml/motion_scene_with_swipe

Slide 60

Slide 60 text

OnSwipe @xml/motion_scene_with_swipe

Slide 61

Slide 61 text

OnSwipe @xml/motion_scene_with_swipe

Slide 62

Slide 62 text

OnSwipe @xml/motion_scene_with_swipe

Slide 63

Slide 63 text

OnSwipe @xml/motion_scene_with_swipe

Slide 64

Slide 64 text

OnSwipe @xml/motion_scene_with_swipe

Slide 65

Slide 65 text

OnSwipe @xml/motion_scene_with_swipe

Slide 66

Slide 66 text

OnSwipe @xml/motion_scene_with_swipe

Slide 67

Slide 67 text

@xml/motion_scene_with_swipe OnSwipe

Slide 68

Slide 68 text

@xml/motion_scene_with_swipe OnSwipe

Slide 69

Slide 69 text

autoComplete stop decelerate

Slide 70

Slide 70 text

@xml/motion_scene @xml/motion_scene Interpolation

Slide 71

Slide 71 text

app:motionInterpolator="easeIn" app:motionInterpolator="easeOut" app:motionInterpolator="easeInOut" app:motionInterpolator="bounce" app:motionInterpolator="linear" Interpolation

Slide 72

Slide 72 text

easeIn easeInOut easeOut

Slide 73

Slide 73 text

standard linear bounce

Slide 74

Slide 74 text

cubic app:motionInterpolator="cubic(0.42,0,1,1)" https://cubic-bezier.com/#.42,0,1,1

Slide 75

Slide 75 text

https://cubic-bezier.com/#.42,0,1,1

Slide 76

Slide 76 text

@xml/swiping_scene Adding another state swiping_scene.xml ConstraintSet start ConstraintSet end

Slide 77

Slide 77 text

@xml/swiping_scene Adding another state swiping_scene.xml ConstraintSet start ConstraintSet end ConstraintSet middle

Slide 78

Slide 78 text

@xml/swiping_scene Adding another state swiping_scene.xml ConstraintSet start Transition swipe_a OnSwipe square start middle Transition swipe_b OnSwipe square middle end

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

Sub Elements

Slide 81

Slide 81 text

Sub Elements

Slide 82

Slide 82 text

Sub Elements

Slide 83

Slide 83 text

Slide 84

Slide 84 text

android:layout_marginBottom="dp" app:layout_constrainedWidth="boolean" app:layout_constrainedHeight="boolean" app:layout_constraintWidth_min="dp" app:layout_constraintHeight_max="dp" app:layout_constraintDimensionRatio="1:1" app:layout_constraintHorizontal_bias="0.35" app:layout_constraintVertical_bias="0.35" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintVertical_chainStyle="spread" /> Sub Elements :-Layout

Slide 85

Slide 85 text

Sub Elements :-PropertySet

Slide 86

Slide 86 text

Changing Text

Slide 87

Slide 87 text

Changing Text

Slide 88

Slide 88 text

Sub Elements :-Motion

Slide 89

Slide 89 text

Linear Horizontal Vertical

Slide 90

Slide 90 text

Horizontal Linear Vertical

Slide 91

Slide 91 text

@xml/motion_scene @xml/motion_scene Sub Elements :-Motion

Slide 92

Slide 92 text

Sub Elements :-Motion @xml/motion_scene

Slide 93

Slide 93 text

Sub Elements: Transform

Slide 94

Slide 94 text

swiping_scene.xml Sub Elements: Transform ConstraintSet start ConstraintSet end Transition toggle OnClick square start end

Slide 95

Slide 95 text

swiping_scene.xml Sub Elements: Transform ConstraintSet start ConstraintSet end Transition toggle OnClick square start end Transform

Slide 96

Slide 96 text

swiping_scene.xml Sub Elements: Transform ConstraintSet start ConstraintSet end Transition toggle OnClick square start end Transform rotate 360

Slide 97

Slide 97 text

swiping_scene.xml Sub Elements: Transform ConstraintSet start ConstraintSet end Transition toggle OnClick square start end Transform rotate 360 rotateX 360

Slide 98

Slide 98 text

swiping_scene.xml Sub Elements: Transform ConstraintSet start ConstraintSet end Transition toggle OnClick square start end Transform rotate 360 rotateX 360

Slide 99

Slide 99 text

Sub Elements: Transform swiping_scene.xml ConstraintSet start ConstraintSet end Transition toggle OnClick square start end Transform rotate 360 rotateX 360

Slide 100

Slide 100 text

Sub Elements: Transform swiping_scene.xml ConstraintSet start ConstraintSet end Transition toggle OnClick square start end KeyFrameSet Transform rotate 360 rotateX 360

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

KeyFrameSet KeyFrameSets

Slide 104

Slide 104 text

KeyFrameSet KeyFrameSets

Slide 105

Slide 105 text

KeyFrameSets KeyFrameSet KeyFrames let you specify a change at a point in time during transition

Slide 106

Slide 106 text

KeyFrameSets KeyFrameSet KeyFrames let you specify a change at a point in time during transition

Slide 107

Slide 107 text

KeyFrameSets KeyFrameSet 100 0 25 50 75 KeyFrames let you specify a change at a point in time during transition

Slide 108

Slide 108 text

KeyFrameSets KeyFrameSet 100 0 25 50 75 KeyFrames let you specify a change at a point in time during transition

Slide 109

Slide 109 text

KeyFrameSets KeyFrameSet 100 0 25 50 75 KeyFrames let you specify a change at a point in time during transition

Slide 110

Slide 110 text

KeyFrameSets KeyFrameSet 100 0 25 50 75 KeyFrames let you specify a change at a point in time during transition

Slide 111

Slide 111 text

KeyFrameSets KeyFrameSet 100 0 25 50 75 KeyFrames let you specify a change at a point in time during transition

Slide 112

Slide 112 text

KeyFrameSets KeyFrameSet 100 0 25 50 75 KeyFrames let you specify a change at a point in time during transition

Slide 113

Slide 113 text

KeyFrameSets KeyFrameSet 100 0 25 50 75 KeyFrames let you specify a change at a point in time during transition

Slide 114

Slide 114 text

KeyFrameSets KeyFrameSet 100 0 25 50 75 KeyFrames let you specify a change at a point in time during transition

Slide 115

Slide 115 text

KeyFrameSets: Key Attribute

Slide 116

Slide 116 text

KeyFrameSets: Key Attribute

Slide 117

Slide 117 text

KeyFrameSets: Key Attribute

Slide 118

Slide 118 text

KeyFrameSets: Key Attribute

Slide 119

Slide 119 text

KeyFrameSets: Key Attribute

Slide 120

Slide 120 text

KeyFrameSets: Key Attribute

Slide 121

Slide 121 text

Practical Examples

Slide 122

Slide 122 text

Swiping Items @layout/activity_swipe_items

Slide 123

Slide 123 text

Swiping Items @layout/activity_swipe_items

Slide 124

Slide 124 text

Swiping Items @layout/activity_swipe_items @xml/swipe_item_scene

Slide 125

Slide 125 text

Swiping Items @xml/swipe_item_scene

Slide 126

Slide 126 text

Swiping Items @xml/swipe_item_scene

Slide 127

Slide 127 text

Swiping Items @xml/swipe_item_scene

Slide 128

Slide 128 text

Swiping Items

Slide 129

Slide 129 text

Swiping Items

Slide 130

Slide 130 text

Swiping Items

Slide 131

Slide 131 text

Swiping Items There is no change in horizontal position of any side in the foreground view, therefore MotionLayout cannot determine how to interpolate between the two states

Slide 132

Slide 132 text

Swiping Items

Slide 133

Slide 133 text

Swiping Items

Slide 134

Slide 134 text

Swiping Items

Slide 135

Slide 135 text

Swiping Items

Slide 136

Slide 136 text

Swiping Items

Slide 137

Slide 137 text

Swiping Items

Slide 138

Slide 138 text

Swiping Items Or do not specify a touchAnchor and then there is no need to create clever hidden views.

Slide 139

Slide 139 text

Collapsing Toolbar @layout/activity_collapsing_toolbar

Slide 140

Slide 140 text

Collapsing Toolbar @xml/collapse_on_scroll_scene

Slide 141

Slide 141 text

Collapsing Toolbar @xml/collapse_on_scroll_scene

Slide 142

Slide 142 text

Slide 143

Slide 143 text

android:layout_height="128dp" app:layout_constraintTop_toTopOf="parent"/> Collapsing Toolbar @xml/collapse_on_scroll_scene

Slide 144

Slide 144 text

android:layout_height="128dp" app:layout_constraintTop_toTopOf="parent"/> Collapsing Toolbar - Derived Constraints @xml/collapse_on_scroll_scene

Slide 145

Slide 145 text

Nested MotionLayout

Slide 146

Slide 146 text

@layout/activity_collapsing_toolbar Nested MotionLayout @layout/activity_collapsing_toolbar

Slide 147

Slide 147 text

@layout/activity_collapsing_toolbar Nested MotionLayout @layout/activity_collapsing_toolbar

Slide 148

Slide 148 text

Nested MotionLayout Header - Scaling Text @xml/collapsing_header_scene

Slide 149

Slide 149 text

@xml/collapsing_header_scene Nested MotionLayout Header - Scaling Text

Slide 150

Slide 150 text

Scaling Text

Slide 151

Slide 151 text

Scaling Text

Slide 152

Slide 152 text

Scaling Text

Slide 153

Slide 153 text

textSize via CustomAttribute scaleX&Y via Transform

Slide 154

Slide 154 text

Nested MotionLayout Header @xml/collapsing_header_scene

Slide 155

Slide 155 text

Slide 156

Slide 156 text

Slide 157

Slide 157 text

Nested MotionLayout @xml/collapse_on_scroll_scene

Slide 158

Slide 158 text

Nested MotionLayout @xml/collapse_on_scroll_scene

Slide 159

Slide 159 text

Nested MotionLayout @xml/collapse_on_scroll_scene

Slide 160

Slide 160 text

Slide 161

Slide 161 text

tionScene> Changing Text in MotionLayout @xml/collapsing_header_scene

Slide 162

Slide 162 text

Slide 163

Slide 163 text

Slide 164

Slide 164 text

Slide 165

Slide 165 text

@xml/collapsing_header_scene Visibility

Slide 166

Slide 166 text

@xml/collapsing_header_scene Visibility

Slide 167

Slide 167 text

@xml/collapsing_header_scene Visibility

Slide 168

Slide 168 text

Visibility

Slide 169

Slide 169 text

Visibility normal is the default for all views in all constraints unless otherwise specified

Slide 170

Slide 170 text

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()

Slide 171

Slide 171 text

constraintSet.constrainWidth(viewId, boundaries.width) constraintSet.constrainHeight(viewId, boundaries.height) constraintSet.connect(viewId, TOP, R.id.boundaries, TOP, 0) constraintSet.connect(viewId, START, R.id.boundaries, START, 0) constraintSet.connect(viewId, END, R.id.boundaries, END, 0) constraintSet.connect(viewId, BOTTOM, R.id.boundaries, BOTTOM, 0) constraintSet.setElevation(view.id, 1f) motion_layout.updateState(R.id.zoomed_in, constraintSet) Changing Constraints Programmatically PhotoGridActivity.kt

Slide 172

Slide 172 text

constraintSet.constrainWidth(viewId, boundaries.width) constraintSet.constrainHeight(viewId, boundaries.height) constraintSet.connect(viewId, TOP, R.id.boundaries, TOP, 0) constraintSet.connect(viewId, START, R.id.boundaries, START, 0) constraintSet.connect(viewId, END, R.id.boundaries, END, 0) constraintSet.connect(viewId, BOTTOM, R.id.boundaries, BOTTOM, 0) constraintSet.setElevation(view.id, 1f) motion_layout.updateState(R.id.zoomed_in, constraintSet) Changing Constraints Programmatically PhotoGridActivity.kt

Slide 173

Slide 173 text

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

Slide 174

Slide 174 text

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

Slide 175

Slide 175 text

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

Slide 176

Slide 176 text

RecyclerView & MotionLayout Placeholder • Calculate ViewHolder View position • Update a placeholder view within the starting ConstraintSet • Show hidden MotionLayout with placeholder

Slide 177

Slide 177 text

RecyclerView & MotionLayout Placeholder

Slide 178

Slide 178 text

AutoTransitions

Slide 179

Slide 179 text

• Previously the only option to turn on and off autoTransition was via reflection, but as of beta2 it is part of the Transition public API. • However I haven't found practical use cases for this yet... maybe you will! Changing Transitions on the fly

Slide 180

Slide 180 text

Debugging What state am I in? startState -> currentState -> endState

Slide 181

Slide 181 text

@layout/activity_main Debugging

Slide 182

Slide 182 text

Debugging

Slide 183

Slide 183 text

asConfigured rectangles deltaRelative

Slide 184

Slide 184 text

asConfigured rectangles deltaRelative

Slide 185

Slide 185 text

Debugging MotionExtensions.kt fun MotionLayout.needsTransition(destination: Int): Boolean { val end = endState return when (currentState) { // If moving, are we moving to the destination? -1 -> end != destination // Not yet moving startState -> true // If at the end state, did we get to the destination? end -> end != destination // Unknown state else -> false }

Slide 186

Slide 186 text

Debugging MotionExtensions.kt fun Int.resName(context: Context?): String { return if (this == -1) { "moving" } else try { context?.resources?.getResourceEntryName(this) ?: "unknown" } catch (ex: Throwable) { "unknown" } }

Slide 187

Slide 187 text

MotionExtensions.kt fun MotionLayout.after(completion: () -> Unit) { this.setTransitionListener(object: MotionLayout.TransitionListener { override fun onTransitionTrigger( layout: MotionLayout?, startId: Int, positive: Boolean, progress: Float) {} override fun onTransitionStarted( layout: MotionLayout?, startId: Int, endId: Int) { } override fun onTransitionChange( layout: MotionLayout?, startId: Int, endId: Int, progress: Float) { } Debugging

Slide 188

Slide 188 text

override fun onTransitionTrigger( layout: MotionLayout?, startId: Int, positive: Boolean, progress: Float) {} override fun onTransitionStarted( layout: MotionLayout?, startId: Int, endId: Int) { } override fun onTransitionChange( layout: MotionLayout?, startId: Int, endId: Int, progress: Float) { } override fun onTransitionCompleted( layout: MotionLayout?, currentId: Int) { completion() } // Already removed in beta2 release override fun allowsTransition(transition: MotionScene.Transition?): Boolean = true }) } Debugging

Slide 189

Slide 189 text

Constraints - Limitations • Some problems cannot be solved with derived Constraints. • Creating a very large number of ConstraintSets and Transitions is infeasible.

Slide 190

Slide 190 text

Constraints - Limitations N!/2 States Each requires a handwritten ConstraintSet This 2x2 board has 12 states A 3x3 board would have 181440 states

Slide 191

Slide 191 text

Constraints - Limitations

Slide 192

Slide 192 text

Other Practical Examples

Slide 193

Slide 193 text

Swiping Items with Collapsing Toolbar

Slide 194

Slide 194 text

Progress Indicator

Slide 195

Slide 195 text

ProgressBar

Slide 196

Slide 196 text

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) }

Slide 197

Slide 197 text

Summary

Slide 198

Slide 198 text

Why You Should Try MotionLayout • Reduces context switching • Makes some hard animations much easier • Allows us to make animations reentrant, continuous, & smooth

Slide 199

Slide 199 text

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

Slide 200

Slide 200 text

11 MotionLayout in Hinge's production app Onboarding Flow

Slide 201

Slide 201 text

Questions? 11 MotionLayout in Hinge's production app Profile Flows

Slide 202

Slide 202 text

Questions? bit.ly/dcsf19-adv-motionlayout find me on Twitter / Github @kaeawc