As presented in droidcon Tel Aviv 2018: http://il.droidcon.com

1. ConstraintLayout
Making Animations
MotionLayout
John Hoford @johnhoford

2. { droidcon Tel Aviv}
ConstraintLayout 2.0 alpha2
★ Layout
★ Helpers
★ Rendering
★ Live Resize
★ MotionLayout
★ APIs

3. { droidcon Tel Aviv}
ConstraintLayout 2.0 alpha2
★ Layout
★ Helpers
★ Rendering
★ Live Resize
★ MotionLayout
★ APIs

4. { droidcon Tel Aviv}
Animation

5. { droidcon Tel Aviv}
Why add Animation?
★Provide Context
★Convey Meaning
★Delight
★Distract

6. { droidcon Tel Aviv}
Why add Animation
★Provide Context
Where did the UI come from?
Where did it go?

7. { droidcon Tel Aviv}
Why add Animation
★Convey Meaning
Use motion to inform the user
(Normally animated content)

8. { droidcon Tel Aviv}
Why add Animation
★Delight
Visually interesting animations
✴ Make your app memorable
✴ Indicates app is high quality

9. { droidcon Tel Aviv}
Why add Animation
★Distract
•Only when necessary
•Startup screen
•Performing work

10. { droidcon Tel Aviv}
Animation Types
Animated content
Transition Layouts
Motion
Property Animation

11. { droidcon Tel Aviv}
Animation Types
Animated content
Transition Layouts
Motion
Lottie, Animated Vector Drawable, GIFs, etc.
TransitionManager
CoordinatorLayout
Property Animation Property animation framework (code)

12. { droidcon Tel Aviv}
MotionLayout
Animated content Lottie, Animated Vector Drawable, GIFs, etc.
TransitionManager
CoordinatorLayout
Property animation framework (code)
Transition Layouts
Motion
Property Animation

13. { droidcon Tel Aviv}
MotionLayout

14. { droidcon Tel Aviv}
MotionLayout basics
★ Sub class of ConstraintLayout
★ Extends CL2.0s LayoutDescription to have full animations capabilities
★ Provides a division between views and layout & animation
class MotionLayout extends ConstraintLayout
app:layoutDescription=“@xml/motion_scene”
layout/
motion.xml
View
Views
xml/
motion_scene.xml
View
Constraints
View
KeyFrames

15. { droidcon Tel Aviv}
MotionLayout goals
★ Lower cost of maintain programatic animations
★ Richly Declarative (can support tooling)
★ A platform for us to deliver more capability over time

16. { droidcon Tel Aviv}
It’s Declarative

17. { droidcon Tel Aviv}
Declarative Approach
★ Rich easier model
★ We can build tooling

18. { droidcon Tel Aviv}
MotionLayout
Hello World

19. { droidcon Tel Aviv}
Simple ConstrintLayout
• Controls in a panel

20. { droidcon Tel Aviv}
Convert To MotionLayout
•Rename ConstrintLayout to :
android.support.constraint.motion.MotionLayout
•Add attribute:
app:layoutDescription="@xml/motion_scene"
•Creat res/xml/motion_scene.xml
•In motion scene…

21. <?xml version="1.0" encoding="utf-8"?>
<MotionScene …>
<Transition
motion:constraintSetStart="@+id/start"
motion:constraintSetEnd="@+id/end">
</Transition>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id=“@+id/control”…/>
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id=“@+id/control" …/>
</ConstraintSet>
</MotionScene>

22. <?xml version="1.0" encoding="utf-8"?>
<MotionScene …>
<Transition
motion:constraintSetStart="@+id/start"
motion:constraintSetEnd="@+id/end">
</Transition>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id=“@+id/control”…/>
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id=“@+id/control" …/>
</ConstraintSet>
</MotionScene>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id=“@+id/control"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
motion:layout_constraintBottom_toBottomOf=“parent"
motion:layout_constraintEnd_toStartOf="@+id/imageButton2"
motion:layout_constraintStart_toStartOf="parent"
/>
</ConstraintSet>

23. <?xml version="1.0" encoding="utf-8"?>
<MotionScene …>
<Transition
motion:constraintSetStart="@+id/start"
motion:constraintSetEnd="@+id/end">
</Transition>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id=“@+id/control”…/>
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id=“@+id/control" …/>
</ConstraintSet>
</MotionScene>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id=“@+id/control"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
motion:layout_constraintTop_toTopOf=“parent”
motion:layout_constraintEnd_toStartOf="@+id/imageButton2"
motion:layout_constraintStart_toStartOf="parent"
/>
</ConstraintSet>

24. { droidcon Tel Aviv}
3 ways to trigger
Animation
• Programatic
• Built in OnTouch or OnSwipe
• Nested - MotionLayout containing MotionLayout

25. { droidcon Tel Aviv}
Advantages
• All you views are in one layout.
•The animation effects & layout are unified.
•You can have matching layouts for landscape, screen size, etc.
•You can view this from the IDE

26. { droidcon Tel Aviv}
MotionLayout
Architecture

27. { droidcon Tel Aviv}
xml/motion_scene.xml
MotionScene
ConstraintSet
ConstraintSet
Major components
layout/motion.xml
MotionLayout
View
Helpers
View
Constraints
Transition
Transition
KeyFrameSet
ViewKeyPosition
ViewKeyAttributes
View
KeyCycle
View
Helpers
app:layoutDescription =

28. { droidcon Tel Aviv}
xml/motion_scene.xml
MotionScene
ConstraintSet
ConstraintSet
MotionLayout
layout/motion.xml
MotionLayout
View
Helpers
View
Constraints
Transition
Transition
KeyFrameSet
ViewKeyPosition
ViewKeyAttributes
View
KeyCycle
View
Helpers
app:layoutDescription =

29. { droidcon Tel Aviv}
MotionLayout XML attributes
★ app:layoutDescription =”reference”
★ app:applyMotionScene =”boolean” [ default = true ]
★ app:showPaths =”boolean” [ default = false]
★ app:progress =”float”
★ app:currentState =”reference”

30. { droidcon Tel Aviv}
Transition API
★ transitionToEnd()
★ transitionToStart()
★ transitionToState(int state)
★ setProgress(float value) [0 .. 1]

31. { droidcon Tel Aviv}
xml/motion_scene.xml
MotionScene
ConstraintSet
ConstraintSet
ConstraintSet
layout/motion.xml
MotionLayout
View
Helpers
View
Constraints
Transition
Transition
KeyFrameSet
ViewKeyPosition
ViewKeyAttributes
View
KeyCycle
View
Helpers
app:layoutDescription =

32. { droidcon Tel Aviv}
ConstraintSet
★ Encapsulate all the rules for a layout
★ Apply ConstraintSet to an existing layout
★ Switch between multiple ConstraintSets
★ Basic animation capabilities using TransitionManager

33. { droidcon Tel Aviv}
Start End
Seekable Transition
Start
ConstraintSet
End
ConstraintSet
Interpolation

34. { droidcon Tel Aviv}
Interpolated Attributes
★ Position, Dimensions
★ Visibility & Alpha
★ Translation, Rotation, Scale, Elevation
★ Custom attributes

35. { droidcon Tel Aviv}
Custom Attributes
★ Extension to ConstraintSet
★ Define values for any attribute
★Specify the type
★Specify the setter name
string
color
integer
float
dimension
boolean

36. <ConstraintSet ...>
<Constraint ...>
<CustomAttribute
motion:attributeName="backgroundColor"
motion:customColorValue="#D81B60" />
</Constraint>
</ConstraintSet>
★call
setBackgroundColor(0xD81B60);

37. { droidcon Tel Aviv}
xml/motion_scene.xml
MotionScene
ConstraintSet
ConstraintSet
Transition
layout/motion.xml
MotionLayout
View
Helpers
View
Constraints
Transition
Transition
KeyFrameSet
ViewKeyPosition
ViewKeyAttributes
View
KeyCycle
View
Helpers
app:layoutDescription =

38. { droidcon Tel Aviv}
Transition XML attributes
★ motion:constraintSetStart =”reference”
★ motion:constraintSetEnd =”reference”
★ motion:duration =”int” [ milliseconds ]
★ motion:interpolator = ”linear” (easeInOut, easeOut, …

39. { droidcon Tel Aviv}
MotionLayout
Example walk through

40. { droidcon Tel Aviv}

41. <?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>

42. <?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>

43. <?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" />

44. <?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" />

45. 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"

46. 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>

47. <?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>

48. 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>

49. 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" />

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

51. { droidcon Tel Aviv}

52. <?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" />

53. <?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"

54. <?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"/>

55. 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"

56. 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" />

57. { droidcon Tel Aviv}

58. { droidcon Tel Aviv}
Utilities
★ MockView
★ ImageFilterView : Contrast, Saturation, Warmth, crossfade

59. { droidcon Tel Aviv}

60. <android.support.constraint.motion.MotionLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/motionLayout"
app:layoutDescription="@xml/scene_04"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.utils.ImageFilterView
android:id="@+id/image"
android:background="@color/colorAccent"
android:src="@drawable/roard"
app:altSrc="@drawable/hoford"
android:layout_width="64dp"
android:layout_height="64dp"/>
</android.support.constraint.motion.MotionLayout>

61. <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">
<OnSwipe
motion:dragDirection="dragRight"
motion:touchAnchorId="@id/image"
motion:touchAnchorSide="right" />
</Transition>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@+id/image"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginStart="8dp"

62. motion:touchAnchorSide="right" />
</Transition>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@+id/image"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginStart="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent">
<CustomAttribute
motion:attributeName="crossfade"
motion:customFloatValue="0" />
</Constraint>
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint

63. motion:touchAnchorSide="right" />
</Transition>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@+id/image"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginStart="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent">
<CustomAttribute
motion:attributeName="crossfade"
motion:customFloatValue="0" />
</Constraint>
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint

64. </Constraint>
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@id/image"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginEnd="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintTop_toTopOf="parent">
<CustomAttribute
motion:attributeName="crossfade"
motion:customFloatValue="1" />
</Constraint>
</ConstraintSet>
</MotionScene>

65. </Constraint>
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@id/image"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginEnd="8dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintTop_toTopOf="parent">
<CustomAttribute
motion:attributeName="crossfade"
motion:customFloatValue="1" />
</Constraint>
</ConstraintSet>
</MotionScene>

66. { droidcon Tel Aviv}

67. { droidcon Tel Aviv}
Events

68. { droidcon Tel Aviv}
Events
★ TransitionListener
★ OnClick
★ OnSwipe

69. { droidcon Tel Aviv}
TransitionListener

70. public interface TransitionListener {
void onTransitionChange(MotionLayout motionLayout,
int startId, int endId,
float progress);
void onTransitionCompleted(MotionLayout motionLayout,
int currentId);
}

71. { droidcon Tel Aviv}
OnSwipe

72. <OnSwipe
motion:dragDirection="dragUp"
motion:touchAnchorId="@+id/widget"
motion:touchAnchorSide=“top" />

73. dragDirection
dragUp
dragDown
dragRight
dragLeft
touchAnchorId
touchAnchorSide
top
bottom
left
right

74. OnSwipe
<OnSwipe
motion:dragDirection="dragUp"
motion:touchAnchorId="@+id/widget"
motion:touchAnchorSide=“top" />
Create your animation
OnSwipe “plays” it

75. OnSwipe: Top
touchAnchorSide : TOP

76. OnSwipe: Right
touchAnchorSide : RIGHT

77. OnSwipe: Bottom
touchAnchorSide : BOTTOM

78. OnSwipe: Left
touchAnchorSide : LEFT

79. Touch Up / Release
Takes in account velocity
Choose a continuous velocity curve to reach the endpoints
with a velocity of zero

80. { droidcon Tel Aviv}
OnClick

81. <OnClick motion:target="@+id/run" />
mode
• transitionToEnd
• toggle
• transitionToStart
• jumpToEnd
• jumpToStart
OnClick

82. { droidcon Tel Aviv}
xml/motion_scene.xml
MotionScene
ConstraintSet
ConstraintSet
Major components
layout/motion.xml
MotionLayout
View
Helpers
View
Constraints
Transition
Transition
KeyFrameSet
ViewKeyPosition
ViewKeyAttributes
View
KeyCycle
View
Helpers
app:layoutDescription =

83. { droidcon Tel Aviv}
Keyframes

84. { droidcon Tel Aviv}
Keyframe
a rendez-vous in time

85. { droidcon Tel Aviv}
Keyframes
★ Position
★ Attributes
★ Cycles
★ …and more

86. { droidcon Tel Aviv}
Position
Driving layout bounds

87. KeyFrameSet
<KeyFrameSet>
</KeyFrameSet>

88. KeyFrameSet
<KeyFrameSet>
<KeyPosition
motion:target="@+id/widget"
motion:framePosition="50"
motion:percentX=“1.0” />
</KeyFrameSet>

89. KeyFrameSet
<KeyFrameSet>
<KeyPosition
motion:target="@+id/widget"
motion:framePosition="50"
motion:percentX=“1.0”
motion:sizePercent=“0.0"
/>
</KeyFrameSet>

90. KeyFrameSet
<KeyFrameSet>
<KeyPosition
motion:target="@+id/widget"
motion:framePosition="50"
motion:percentX=“1.0”
motion:percentY=“0.3”
motion:sizePercent=“0.0"
/>
</KeyFrameSet>

91. { droidcon Tel Aviv}
Coordinate Systems

92. { droidcon Tel Aviv}

93. { droidcon Tel Aviv}
Start
End

94. { droidcon Tel Aviv}
parentRelative0
X
Y

95. { droidcon Tel Aviv}
deltaRelative
Y
X

96. { droidcon Tel Aviv}
pathRelative
XY

97. KeyFramePosition
<KeyPosition
motion:framePosition="50"
motion:percentX="1"
motion:target=“@id/imageButton*” />

98. { droidcon Tel Aviv}
Attributes
post layout attributes

99. KeyFrameSet
<KeyFrameSet>
<KeyPosition… />
<KeyAttributes
motion:target="@+id/widget"
motion:framePosition="25"
android:rotation=“45”
/>
</KeyFrameSet>

100. KeyFrameSet
<KeyFrameSet>
<KeyPosition… />
<KeyAttributes
motion:target="@+id/widget"
motion:framePosition="25"
android:rotation=“45”/>
<KeyAttributes
motion:target="@+id/widget"
motion:framePosition="50"
android:rotation=“0”/>
</KeyFrameSet>

101. KeyAttributes support
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:progress
+ Custom Attributes
<CustomAttribute
motion:attributeName="BackgroundColor"
motion:customColorValue="#D81B60"/>

102. { droidcon Tel Aviv}
oscillation of
post layout attributes
Cycles

103. KeyCycle
<KeyFrameSet>
<KeyPosition…/>
<KeyAttributes…/> <KeyAttributes…/>
<KeyCycle
motion:target="@+id/widget"
motion:framePosition="0"
motion:wavePeriod=“0”
motion:translationX=“0.0"
/>
<KeyCycle
motion:target="@+id/widget"
motion:framePosition="50"
motion:wavePeriod=“2”
motion:translationX=“30dp"
/>
</KeyFrameSet>

104. { droidcon Tel Aviv}
Code
KeyCycle
Value (attributes)

105. { droidcon Tel Aviv}
Code
KeyCycle
Period

106. { droidcon Tel Aviv}
Code
KeyCycle WaveForms

107. KeyCycle
<KeyFrameSet>
<KeyPosition…/>
<KeyAttributes…/> <KeyAttributes…/>
<KeyCycle
motion:target="@+id/widget"
motion:framePosition="0"
motion:wavePeriod=“0”
motion:translationX=“0.0"
/>
<KeyCycle
motion:target="@+id/widget"
motion:framePosition="50"
motion:wavePeriod=“2”
motion:translationX=“30dp"
/>
</KeyFrameSet>

108. { droidcon Tel Aviv}
Applications

109. { droidcon Tel Aviv}
Integration
★ CoordinatorLayout
★ DrawerLayout
★ ViewPager
★ MotionLayout

110. { droidcon Tel Aviv}
motion:progress

111. { droidcon Tel Aviv}
CoordinatorLayout
Collapsible
Toolbar
From GitHub

113. { droidcon Tel Aviv}
DrawerLayout
From GitHub

114. { droidcon Tel Aviv}
ViewPager
From GitHub

115. { droidcon Tel Aviv}
From GitHub
Nested MotionLayout

116. { droidcon Tel Aviv}

117. { droidcon Tel Aviv}

118. { droidcon Tel Aviv}
Whats Next…
★ ConstraintLayout 2.0 alpha3
★ KeyTimeCycles
★ Arc mode
★ Multi-state swipe
★ Helpers
★ Alpha MotionEditor

119. { droidcon Tel Aviv}
Documentation
★ Online Documentation: https://developer.android.com/reference/android/
support/constraint/motion/package-summary
★ Medium Articles:
★ Introduction to MotionLayout - Part I, II, III, IV :
http://bit.ly/2O4AmIz
★ GitHub
https://github.com/googlesamples/android-ConstraintLayoutExamples

120. Thanks!
John Hoford
@johnhoford

121. Thanks!
John Hoford
@johnhoford