Droidkaigi2019thagikura 190208135940

1. Deep dive into
MotionLayout
John Hoford
@johnhoford
Nicolas Roard
@camaelon
Takeshi Hagikura
@thagikura

2. ConstraintLayout 2.0

3. DroidKaigi 2019
ConstraintLayout 2.0
• Helpers, Virtual Layouts, MotionLayout
• Announced at Google IO’18
• Built upon ConstraintLayout 1.1
• currently : alpha 3
• alpha 4 in a few weeks (?)

4. ConstraintSet
Encapsulate all the rules for a layout
Apply ConstraintSet to an existing layout
Switch between multiple ConstraintSets
Basic animation capabilities using TransitionManager

5. Droidkaigi 2019
Documentation
• Medium Articles:
• Introduction to MotionLayout part I http://bit.ly/2O4AmIz
• Introduction to MotionLayout part II http://bit.ly/2uPuWbw
• Introduction to MotionLayout part III http://bit.ly/2zRjCSj
• Introduction to MotionLayout part IV http://bit.ly/2QqfJaF
• GitHub:
• https://github.com/googlesamples/android-ConstraintLayoutExamples

7. Motion Layout Basic Example

9. <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.motion.MotionLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/motionLayout"
app:layoutDescription=“@xml/scene"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="@+id/button"
android:background="@color/colorAccent"
android:layout_width="64dp"
android:layout_height="64dp"/>
</android.support.constraint.motion.MotionLayout>

10. <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.motion.MotionLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/motionLayout"
app:layoutDescription=“@xml/scene"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="@+id/button"
android:background="@color/colorAccent"
android:layout_width="64dp"
android:layout_height="64dp"/>
</android.support.constraint.motion.MotionLayout>

11. <?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto">
<Transition
motion:constraintSetStart="@+id/start"
motion:constraintSetEnd="@+id/end"
motion:duration="1000">
</Transition>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@+id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginStart="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />

12. <?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto">
<Transition
motion:constraintSetStart="@+id/start"
motion:constraintSetEnd="@+id/end"
motion:duration="1000">
</Transition>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@+id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginStart="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />

13. motion:constraintSetStart="@+id/start"
motion:constraintSetEnd="@+id/end"
motion:duration="1000">
</Transition>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@+id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginStart="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@+id/button"
android:layout_width="64dp"

14. android:layout_marginStart="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@+id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginEnd="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
</ConstraintSet>
</MotionScene>

15. <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.motion.MotionLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/motionLayout"
app:layoutDescription=“@xml/scene"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="@+id/button"
android:background="@color/colorAccent"
android:layout_width="64dp"
android:layout_height="64dp"/>
</android.support.constraint.motion.MotionLayout>

16. android:layout_height="match_parent">
<View
android:id="@+id/button"
android:background="@color/colorAccent"
android:layout_width="64dp"
android:layout_height=“64dp"/>
</android.support.constraint.motion.MotionLayout>

17. android:layout_height="match_parent">
<View
android:id="@+id/button"
android:background="@color/colorAccent"
android:layout_width="64dp"
android:layout_height=“64dp"/>
</android.support.constraint.motion.MotionLayout>
<Button
android:id=“@+id/run"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:text="Run"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />

18. class BasicTransitionActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.motion)
run.setOnClickListener {
motionLayout.transitionToEnd()
}
}
}

20. <?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto">
<Transition
motion:constraintSetStart="@+id/start"
motion:constraintSetEnd="@+id/end"
motion:duration="1000">
</Transition>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@+id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginStart="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />

21. <?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto">
<Transition
motion:constraintSetStart="@+id/start"
motion:constraintSetEnd="@+id/end"
motion:duration="1000">
</Transition>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@+id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginStart="8dp"
motion:layout_constraintBottom_toBottomOf="parent"

22. <?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto">
<Transition
motion:constraintSetStart="@+id/start"
motion:constraintSetEnd="@+id/end"
motion:duration="1000">
</Transition>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@+id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginStart="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
<OnClick
motion:target=“@id/run"/>

23. xmlns:motion="http://schemas.android.com/apk/res-auto">
<Transition
motion:constraintSetStart="@+id/start"
motion:constraintSetEnd="@+id/end"
motion:duration="1000">
</Transition>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@+id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginStart="8dp"

24. xmlns:motion="http://schemas.android.com/apk/res-auto">
<Transition
motion:constraintSetStart="@+id/start"
motion:constraintSetEnd="@+id/end"
motion:duration="1000">
</Transition>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@+id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginStart="8dp"
<OnSwipe
motion:dragDirection="dragRight"
motion:touchAnchorId="@id/button"
motion:touchAnchorSide="right" />

26. Motion Layout Components

27. MotionLayout
MotionScene

28. layout/motion.xml
MotionLayout
View
Helpers
View
Helpers

29. layout/motion.xml
MotionLayout
View
Helpers
View
Helpers
layout_description=“@xml/scene

30. xml/scene.xml
MotionScene
layout/motion.xml
MotionLayout
View
Helpers
View
Helpers
layout_description=“@xml/scene

31. xml/scene.xml
MotionScene
ConstraintSet
ConstraintSet
layout/motion.xml
MotionLayout
View
Helpers
View
Constraint
View
Helpers
View
Constraint
layout_description=“@xml/scene

32. ConstraintSets

33. ConstraintSet
★ Encapsulate all the rules for a layout
★ Switch between multiple ConstraintSets

34. xml/
motion_scene.xml
MotionScene
ConstraintSet
ConstraintSet
View
Constraint

35. xml/
motion_scene.xml
MotionScene
ConstraintSet
ConstraintSet
View
Constraint
<MotionScene>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginStart="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent">
</Constraint>
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginEnd="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintTop_toTopOf="parent">
</Constraint>
</ConstraintSet>
</MotionScene>

36. xml/
motion_scene.xml
MotionScene
ConstraintSet
ConstraintSet
View
Constraint
<MotionScene>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginStart="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent">
</Constraint>
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginEnd="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintTop_toTopOf="parent">
</Constraint>
</ConstraintSet>
</MotionScene>

37. xml/
motion_scene.xml
MotionScene
ConstraintSet
ConstraintSet
View
Constraint
<MotionScene>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginStart="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent">
</Constraint>
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginEnd="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintTop_toTopOf="parent">
</Constraint>
</ConstraintSet>
</MotionScene>

38. Interpolated Attributes
• Position, Dimensions
• Visibility & Alpha
• Translation, Rotation, Scale, Elevation
• Custom attributes

39. Custom Attributes
• Extension to ConstraintSet
• Define values for any attribute
• Specify the type
• Specify the setter name
string
color
integer
float
dimension
boolean

40. xml/
motion_scene.xml
MotionScene
ConstraintSet
ConstraintSet
View
Constraint
<MotionScene>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginStart="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent">
<CustomAttribute
motion:attributeName="BackgroundColor"
motion:customColorValue="#D81B60" />
</Constraint>
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginEnd="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintTop_toTopOf="parent">
<CustomAttribute
motion:attributeName="BackgroundColor"
motion:customColorValue="#9999FF" />
</Constraint>
</ConstraintSet>
</MotionScene>

41. <MotionScene>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginStart="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent">
<CustomAttribute
motion:attributeName="BackgroundColor"
motion:customColorValue="#D81B60" />
</Constraint>
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginEnd="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintTop_toTopOf="parent">
<CustomAttribute
motion:attributeName="BackgroundColor"
motion:customColorValue="#9999FF" />
</Constraint>
</ConstraintSet>
</MotionScene>

42. xml/scene.xml
MotionScene
ConstraintSet
ConstraintSet
layout/motion.xml
MotionLayout
View
Helpers
View
Constraint
View
Helpers
View
Constraint
layout_description=“@xml/scene

43. xml/scene.xml
MotionScene
ConstraintSet
ConstraintSet
layout/motion.xml
MotionLayout
View
Helpers
View
Constraint Transition
Transition
View
Helpers
View
Constraint
layout_description=“@xml/scene

44. Transitions

45. Transition
Start End

46. xml/
motion_scene.xml
MotionScene
Transition
Transition
<MotionScene>
<Transition
motion:constraintSetEnd="@+id/end"
motion:constraintSetStart="@+id/start"
motion:duration="1000"
motion:interpolator="linear">
<OnSwipe
motion:touchAnchorId="@+id/top_image_container"
motion:touchAnchorSide="bottom"
motion:dragDirection="dragUp" />
</Transition>
</MotionScene>

47. xml/
motion_scene.xml
MotionScene
Transition
Transition
<MotionScene>
<Transition
motion:constraintSetEnd="@+id/end"
motion:constraintSetStart="@+id/start"
motion:duration="1000"
motion:interpolator="linear">
<OnSwipe
motion:touchAnchorId="@+id/top_image_container"
motion:touchAnchorSide="bottom"
motion:dragDirection="dragUp" />
</Transition>
</MotionScene>

48. xml/
motion_scene.xml
MotionScene
Transition
Transition
<MotionScene>
<Transition
motion:constraintSetEnd="@+id/end"
motion:constraintSetStart="@+id/start"
motion:duration="1000"
motion:interpolator="linear">
<OnSwipe
motion:touchAnchorId="@+id/top_image_container"
motion:touchAnchorSide="bottom"
motion:dragDirection="dragUp" />
</Transition>
</MotionScene>
Or OnClick

49. xml/scene.xml
MotionScene
ConstraintSet
ConstraintSet
layout/motion.xml
MotionLayout
View
Helpers
View
Constraint Transition
Transition
View
Helpers
View
Constraint
layout_description=“@xml/scene

50. xml/scene.xml
MotionScene
ConstraintSet
ConstraintSet
layout/motion.xml
MotionLayout
View
Helpers
View
Constraint Transition
Transition
KeyFrameSet
View
KeyPosition
View
KeyAttributes
View
KeyCycle
View
Helpers
View
KeyTimeCycle
View
KeyTrigger
View
Constraint
layout_description=“@xml/scene

51. KeyFrameSets

52. KeyFrame

53. Transition
Start End

54. Transition
Start End
Keyframe(s)

55. KeyPosition

56. <ConstraintSet android:id="@+id/start">
<Constraint
android:id="@id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginStart="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginEnd="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
</ConstraintSet>

57. <Transition>
<KeyFrameSet>
<KeyPosition
motion:keyPositionType="pathRelative"
motion:percentY="-0.25"
motion:framePosition="50"
motion:target="@id/button"/>
</KeyFrameSet>
</Transition>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginStart="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent">
</Constraint>
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginEnd="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintTop_toTopOf="parent">
</Constraint>
</ConstraintSet>

58. <Transition>
<KeyFrameSet>
<KeyPosition
motion:keyPositionType="pathRelative"
motion:percentY="-0.25"
motion:framePosition="50"
motion:target="@id/button"/>
</KeyFrameSet>
</Transition>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginStart="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent">
</Constraint>
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginEnd="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintTop_toTopOf="parent">
</Constraint>
</ConstraintSet>

59. KeyAttributes

60. <KeyFrameSet>
<KeyAttribute
android:scaleX="2"
android:scaleY="2"
android:rotation="-45"
motion:framePosition="50"
motion:target="@id/button" />
<KeyPosition
motion:keyPositionType="pathRelative"
motion:percentY="-0.3"
motion:framePosition="50"
motion:target="@id/button"/>
</KeyFrameSet>

61. <KeyFrameSet>
<KeyAttribute
android:scaleX="2"
android:scaleY="2"
android:rotation="-45"
motion:framePosition="50"
motion:target="@id/button" />
<KeyPosition
motion:keyPositionType="pathRelative"
motion:percentY="-0.3"
motion:framePosition="50"
motion:target="@id/button"/>
</KeyFrameSet>

62. KeyAttributes
motion:transitionEasing
motion:curveFit
android:visibility
android:alpha
android:elevation
android:rotation
android:rotationX
android:rotationY
android:scaleX
android:scaleY
android:translationX
android:translationY
android:translationZ
motion:transitionPathRotate
motion:framePosition

63. KeyAttributes
motion:transitionEasing
motion:curveFit
android:visibility
android:alpha
android:elevation
android:rotation
android:rotationX
android:rotationY
android:scaleX
android:scaleY
android:translationX
android:translationY
android:translationZ
motion:transitionPathRotate
motion:framePosition
+ Custom Attributes
+ Custom Attributes
<CustomAttribute
motion:attributeName="BackgroundColor"
motion:customColorValue="#D81B60"/>

64. Sun example

65. Sunny

66. Start & End

67. Position
<KeyPosition
motion:framePosition="50"
motion:percentY="0.1"
motion:percentX="0.5"
motion:keyPositionType="parentRelative"
motion:target="@id/sun"
motion:pathMotionArc="startHorizontal"
/>

68. Custom Color
<KeyAttribute
motion:framePosition="25"
motion:target="@+id/background">
<CustomAttribute
motion:attributeName="background"
motion:customColorDrawableValue="#97C0FF"
</KeyAttribute>

69. Time Cycles
<KeyTimeCycle
motion:framePosition="50"
android:rotation="45"
motion:target="@id/sun"
motion:wavePeriod=".5"
motion:waveShape="sin" />

70. Cycles

71. Key Cycles
KeyTimeCycles
&
KeyCycles

72. Key Cycle interpolation
<KeyTimeCycle
motion:framePosition="34"
android:translationX="0dp"
motion:target="@id/button"
motion:waveOffset="0dp"
motion:wavePeriod="2"
motion:waveShape="sin" />

73. Monotonic splines
• Less prone to overshoot
• Needs to be differentiable and Integrable
Typical Spline
Monotonic Spline

74. KeyCycle
•Period - 1/pos across space
•Offset - shifts the envelope
•Attributes - set amplitude of wave

75. KeyCycles

76. KeyCycles Period

77. KeyCycles Value

78. KeyCycles offset

79. KeyCycles waveShape

81. KeyCycles multiple waves
translationX
translationY

82. KeyCycles multiple waves
translationX
translationY

83. KeyCycles multiple waves
translationX
translationY

84. KeyCycles imagination is the limit
translationY
rotation
translationY
rotation

85. Introducing CycleEditor
• Explore the capabilities of KeyCycles
• XML shown compatible with alpha3
• Features:
• Graph multiple cycles
• Simulate keyCycles effect on a button

86. KeyTimeCycle
•Period - 1/s (Hz)
•Offset - shifts the envelope
•Attributes - set amplitude of wave
Same attributes as KeyCycle

87. KeyTimeCycles
Period (Hz)
KeyTimeCycle
Attribute
translationX

88. KeyTimeCycles (KeyPosition)
Change the KeyPosition

89. KeyTimeCycles (Attribute)
Changing value of
android:translationX

90. KeyTimeCycles
Changing value of
motion:waveOffset
waveOffset

91. KeyTimeCycles
Changing value of
motion:waveShape

93. How can you use it?

94. Coordinator
Layout
Collapsible
Toolbar
From GitHub

95. DrawerLayout
From GitHub

96. ViewPager
From GitHub

97. New features in alpha 3

98. percentWidth
percentHeight
New in alpha3

99. Without percentWidth

100. With percentWidth

101. ImageView
ImageView

102. ImageView
ImageView

103. ImageView
ImageView
Center transition along X and Y

104. ImageView
ImageView

105. ImageView
ImageView
Size transition

106. ImageView
ImageView
<KeyPosition
motion:target="@id/top_image"
motion:framePosition="90"
motion:percentWidth="0"
motion:percentX="0"
motion:curveFit="linear"
/>

107. ImageView
ImageView
<KeyPosition
motion:target="@id/top_image"
motion:framePosition="90"
motion:percentWidth="0"
motion:percentX="0"
motion:curveFit="linear"
/>
DeltaX is kept 0 until frame
position 90

108. ImageView
ImageView
<KeyPosition
motion:target="@id/top_image"
motion:framePosition="90"
motion:percentWidth="0"
motion:percentX="0"
motion:curveFit="linear"
/>

109. ImageView
ImageView
<KeyPosition
motion:target="@id/top_image"
motion:framePosition="90"
motion:percentWidth="0"
motion:percentX="0"
motion:curveFit="linear"
/>
Delta width is kept 0 until
frame position 90

110. MultiState
New in alpha3

111. Transition
Start End

112. Transition between states
Start State 1
State 2
State 3

114. Current state

115. Transition1

116. Transition1

117. Transition2

118. Transition3

119. X
Unless define a
transition between

120. KeyTrigger
New in alpha3

122. <KeyFrameSet>
<KeyTrigger
motion:framePosition="10"
motion:onPositiveCross="show"
motion:target="@id/fab"/>
<KeyTrigger
motion:framePosition="20"
motion:onNegativeCross="hide"
motion:target="@id/fab"/>
</KeyFrameSet>

123. <KeyFrameSet>
<KeyTrigger
motion:framePosition="10"
motion:onPositiveCross="show"
motion:target="@id/fab"/>
<KeyTrigger
motion:framePosition="20"
motion:onNegativeCross="hide"
motion:target="@id/fab"/>
</KeyFrameSet>
Calls FloatingActionButton.show()
when it passes 10% and above

124. <KeyFrameSet>
<KeyTrigger
motion:framePosition="10"
motion:onPositiveCross="show"
motion:target="@id/fab"/>
<KeyTrigger
motion:framePosition="20"
motion:onNegativeCross="hide"
motion:target="@id/fab"/>
</KeyFrameSet>
Calls FloatingActionButton.hide()
when it passes 20% and below

125. ConstraintLayout 2.0
alpha 4

126. Alpha 4
• Resize handling
• View visibility
• Attributes rename
• Recyclerview

127. RecyclerView
+
MotionLayout

131. How it works
• Handle Gesture
• Provide a similar view
• Add view to Placeholder in MotionLayout
• Recompute bounds
• Run transition

132. Handling
new PlaceholderGestureHandler(
motionLayout,
recyclerView,
view,
viewType
)
gestureHandler.onTouchEvent(event)

133. Basic start to end motion

134. Add size delay
<KeyPosition
motion:framePosition=“40”
motion:percentX=“0”
motion:percentWidth=“0”
motion:percentHeight=“0”
motion:target=“@id/rvItem” />

135. Add tilt
<KeyAttribute
motion:framePosition=“60”
motion:rotationX=“-20”
motion:target=“@id/rvItem” />

136. Wrap up

137. Droidkaigi 2019
Documentation
• Medium Articles:
• Introduction to MotionLayout part I http://bit.ly/2O4AmIz
• Introduction to MotionLayout part II http://bit.ly/2uPuWbw
• Introduction to MotionLayout part III http://bit.ly/2zRjCSj
• Introduction to MotionLayout part IV http://bit.ly/2QqfJaF
• GitHub:
• https://github.com/googlesamples/android-ConstraintLayoutExamples

138. Droidkaigi 2019
Give us feedback!
• Issue tracker:
• http://issuetracker.google.com
• ConstraintLayout component
• Twitter
• Nicolas Roard - @camaelon
• John Hoford - @johnhoford
• Takeshi Hagikura - @thagikura

139. Thanks!
John Hoford
@johnhoford
Nicolas Roard
@camaelon
Takeshi Hagikura
@thagikura