ConstraintLayout 2.0

Presentation of the current state of ConstraintLayout 2.0 library, covering the latest alpha releases (3,4,5) at Android Makers'19

Transcript

1. ConstraintLayout 2.0
   Nicolas Roard
   @camaelon
   John Hoford
   @johnhoford
   

   View Slide

2. Why
   

   View Slide

3. ConstraintLayout 1.x
   Flat hierarchy : decouple layout from the view hierarchy
   Support library
   Powerful internal engine
   Design Tools : UI Builder
   

   View Slide

4. When : some guidance
   Simplify layouts of components
   Build UI quickly
   What about LinearLayout / FrameLayout ?
   

   View Slide

5. ConstraintLayout 2.x
   Flexibility
   Virtual Layouts
   Helpers & Decorators
   Optimizer
   MotionLayout
   Design Tools : UI Builder, Motion Editor
   

   View Slide

6. Motion Editor
   

   View Slide

7. Motion Editor
   

   View Slide

8. Architecture
   

   View Slide

9. Architecture
   Linear Solver
   

   View Slide

10. Architecture
    Constraints Model
    Linear Solver
    

    View Slide

11. Architecture
    Linear Solver
    Constraints Model
    Optimizer
    

    View Slide

12. Architecture
    Linear Solver
    Constraints Model
    Optimizer
    Virtual
    Layouts
    Helpers
    

    View Slide

13. Architecture
    Linear Solver
    Constraints Model
    Optimizer
    MotionLayout
    Virtual
    Layouts
    Helpers
    

    View Slide

14. ConstraintLayout
    

    View Slide

15. Layout concepts
    Direct Constraints : relative, circular, dimensions (ratio…)
    Chains
    Helpers : Guidelines, Barriers, Layer…
    Decorators
    Virtual Layout
    Constraint Sets
    

    View Slide

16. Helpers
    

    View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. Encapsulate Behaviors
    ConstraintLayout utility
    Encapsulate a given behavior
    Apply it to a set of widgets
    ▸ Supported in Studio
    ▸ Can use View APIs (animation,
    etc.) in helpers to promote
    reuse
    

    View Slide

26. Circular Reveal
    

    View Slide

27. Circular Reveal
    

    View Slide

28. @Override
    public void updatePostLayout(ConstraintLayout container) {
    super.updatePostLayout(container);
    if (mContainer != container) {
    int rad =(int) Math.hypot(mComputedMaxY - mComputedMinY,
    mComputedMaxX - mComputedMinX);
    Animator anim = ViewAnimationUtils.createCircularReveal(this,
    (int) mComputedCenterX-getLeft(),
    (int) mComputedCenterY-getTop(), 0, rad);
    anim.setDuration(2000);
    anim.start();
    }
    mContainer = container;
    }
    

    View Slide

29. @Override
    public void updatePostLayout(ConstraintLayout container) {
    super.updatePostLayout(container);
    if (mContainer != container) {
    int rad =(int) Math.hypot(mComputedMaxY - mComputedMinY,
    mComputedMaxX - mComputedMinX);
    Animator anim = ViewAnimationUtils.createCircularReveal(this,
    (int) mComputedCenterX-getLeft(),
    (int) mComputedCenterY-getTop(), 0, rad);
    anim.setDuration(2000);
    anim.start();
    }
    mContainer = container;
    }
    

    View Slide

30. android:id="@+id/helper"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/lake"
    app:constraint_referenced_ids="imageView"/>
    

    View Slide

31. Decorators
    

    View Slide

32. public class MetaballsDecorator extends ConstraintHelper {
    public void updatePostLayout(ConstraintLayout container) {
    int[] ids = getReferencedIds();
    final int count = ids.length;
    for (int i = 0; i < count; i++) {
    View view = container.getViewById(ids[i]);
    // do something
    }
    }
    @Override
    public void onDraw(Canvas canvas) {
    // do something
    }
    }
    

    View Slide

33. Bottom Panel
    Decorator
    

    View Slide

34. Bottom Panel Decorator
    

    View Slide

35. Bottom Panel Decorator
    

    View Slide

36. Bottom Panel Decorator
    

    View Slide

37. Bottom Panel Decorator
    

    View Slide

38. Bottom Panel Decorator
    

    View Slide

39. Virtual Layouts
    

    View Slide

40. MotionLayout
    

    View Slide

41. MotionLayout
    Reflect and animate between multiple states of components
    Coordinating motion of multiple components
    Support nesting MotionLayout
    Drive custom views
    

    View Slide

42. MotionLayout
    Reflect and animate between multiple states of components
    Coordinating motion of multiple components
    Support nesting MotionLayout
    Drive custom views
    

    View Slide

43. MotionLayout
    Subclass of ConstraintLayout
    Gets its constraints from a separate xml file.
    Allows you to directly animate between two Constraint sets
    Extensive control of the Transition between the two
    Custom attributes — not just layout
    

    View Slide

44. Motion concepts
    States (ConstraintSets)
    Transitions
    Keyframes
    Coordinate Systems
    OnSwipe/OnClick
    A B
    

    View Slide

45. Motion concepts
    States (ConstraintSets)
    Transitions
    Keyframes
    Coordinate Systems
    OnSwipe/OnClick
    A B
    

    View Slide

46. Motion concepts
    States (ConstraintSets)
    Transitions
    Keyframes
    Coordinate Systems
    OnSwipe/OnClick
    A B
    

    View Slide

47. States (ConstraintSets)
    Transitions
    Keyframes
    Coordinate Systems
    OnSwipe/OnClick
    Motion concepts
    

    View Slide

48. States (ConstraintSets)
    Transitions
    Keyframes
    Coordinate Systems
    OnSwipe/OnClick
    Motion concepts
    

    View Slide

49. States (ConstraintSets)
    Transitions
    Keyframes
    Coordinate Systems
    OnSwipe/OnClick
    Motion concepts
    

    View Slide

50. States (ConstraintSets)
    Transitions
    Keyframes
    Coordinate Systems
    OnSwipe/OnClick
    Motion concepts
    

    View Slide

51. Organisation
    Layout file
    Views
    Helpers
    VirtualLayout
    MotionScene file
    OnSwipe
    Constraint
    KeyFrameSet
    Transition ConstraintSet
    

    View Slide

52. Example
    

    View Slide

53. Start & End
    

    View Slide

54. Start & End
    

    View Slide

55. Positioning
    motion:framePosition="50"
    motion:percentY="0.1"
    motion:percentX="0.5"
    motion:keyPositionType="parentRelative"
    motion:target="@id/sun"
    motion:pathMotionArc="startHorizontal"
    />
    

    View Slide

56. Positioning
    motion:framePosition="50"
    motion:percentY="0.1"
    motion:percentX="0.5"
    motion:keyPositionType="parentRelative"
    motion:target="@id/sun"
    motion:pathMotionArc="startHorizontal"
    />
    

    View Slide

57. Custom Attribute : color
    motion:framePosition="25"
    motion:target="@+id/background">
    motion:attributeName="background"
    motion:customColorDrawableValue="#97C0FF"
    
    

    View Slide

58. Custom Attribute : color
    motion:framePosition="25"
    motion:target="@+id/background">
    motion:attributeName="background"
    motion:customColorDrawableValue="#97C0FF"
    
    

    View Slide

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

    View Slide

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

    View Slide

61. How to use it?
    

    View Slide

62. Coordinator
    
    Layout
    Collapsible
    
    Toolbar
    From GitHub
    

    View Slide

63. Coordinator
    
    Layout
    Collapsible
    
    Toolbar
    From GitHub
    

    View Slide

64. DrawerLayout
    From GitHub
    

    View Slide

65. DrawerLayout
    From GitHub
    

    View Slide

66. ViewPager
    From GitHub
    

    View Slide

67. ViewPager
    From GitHub
    

    View Slide

68. Coordination
    

    View Slide

69. View Slide

70. View Slide

71. From GitHub
    Nested
    
    MotionLayout
    

    View Slide

72. From GitHub
    Nested
    
    MotionLayout
    

    View Slide

73. Start End
    MotionLayout
    2
    MotionLayout
    1
    

    View Slide

74. Chris Banes
    "I MotionLayout, creating
    complex UI animations is a
    breeze when you can define
    some keyframes and let
    MotionLayout handle the rest"
    

    View Slide

75. Chris Banes
    "I MotionLayout, creating
    complex UI animations is a
    breeze when you can define
    some keyframes and let
    MotionLayout handle the rest"
    

    View Slide

76. View Slide

77. View Slide

78. Cycles
    

    View Slide

79. View Slide

80. View Slide

81. Key Cycles
    KeyTimeCycles
    
    &
    
    KeyCycles
    

    View Slide

82. Key Cycles
    KeyTimeCycles
    
    &
    
    KeyCycles
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

86. KeyCycles
    

    View Slide

87. KeyCycles
    

    View Slide

88. KeyCycles Period
    

    View Slide

89. KeyCycles Period
    

    View Slide

90. KeyCycles Value
    

    View Slide

91. KeyCycles Value
    

    View Slide

92. KeyCycles offset
    

    View Slide

93. KeyCycles offset
    

    View Slide

94. KeyCycles waveShape
    

    View Slide

95. KeyCycles waveShape
    

    View Slide

96. View Slide

97. View Slide

98. KeyCycles multiple waves
    translationX
    translationY
    

    View Slide

99. KeyCycles multiple waves
    translationX
    translationY
    

    View Slide

100. KeyCycles multiple waves
     translationX
     translationY
     

     View Slide

101. KeyCycles multiple waves
     translationX
     translationY
     

     View Slide

102. KeyCycles multiple waves
     translationX
     translationY
     

     View Slide

103. KeyCycles multiple waves
     translationX
     translationY
     

     View Slide

104. KeyCycles imagination is the limit
     translationY
     rotation
     translationY
     rotation
     

     View Slide

105. KeyCycles imagination is the limit
     translationY
     rotation
     translationY
     rotation
     

     View Slide

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

     View Slide

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

     View Slide

108. KeyTimeCycles
     Period (Hz)
     KeyTimeCycle
     Attribute
     translationX
     

     View Slide

109. KeyTimeCycles
     Period (Hz)
     KeyTimeCycle
     Attribute
     translationX
     

     View Slide

110. KeyTimeCycles (KeyPosition)
     Change the KeyPosition
     

     View Slide

111. KeyTimeCycles (KeyPosition)
     Change the KeyPosition
     

     View Slide

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

     View Slide

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

     View Slide

114. KeyTimeCycles
     Changing value of
     motion:waveOffset
     waveOffset
     

     View Slide

115. KeyTimeCycles
     Changing value of
     motion:waveOffset
     waveOffset
     

     View Slide

116. KeyTimeCycles
     Changing value of
     motion:waveShape
     

     View Slide

117. KeyTimeCycles
     Changing value of
     motion:waveShape
     

     View Slide

118. What’s new
     

     View Slide

119. Alpha 3
     MotionLayout
     

     View Slide

120. alpha 3
     New XML format
     KeyTimeCycle
     KeyTrigger
     

     View Slide

121. Alpha 4
     MotionLayout
     

     View Slide

122. alpha 4
     Richer behaviors for OnClick actions
     CustomAttributes support for customPixelDimensions
     ImageFilterView overlay support
     KeyTrigger collision support
     Attributes rename
     

     View Slide

123. MotionLayout
     Alpha 5
     

     View Slide

124. alpha 5
     MotionTarget string matching
     OnSwipe regions
     Automatic transitions
     Derived ConstraintSets 

     

     View Slide

125. Target Matching
     

     View Slide

126. MotionTarget matching
     Two Tags:
     layout_constraintTag … Label a View
     motionTarget … Takes ID or Regular Expressions
     Apply one keyframe to many views
     

     View Slide

127. layout_constraintTag & motionTarget
     In Layout…
     motion:layout_constraintTag="ActionRow1"
     />
     

     View Slide

128. layout_constraintTag & motionTarget
     In Layout…
     motion:layout_constraintTag="ActionRow1"
     />
     

     View Slide

129. layout_constraintTag & motionTarget
     In Layout…
     motion:layout_constraintTag="ActionRow1"
     />
     Or in MotionScene …
     
     motion:layout_constraintTag="ActionRow1"
     />
     
     motion:layout_constraintTag="ActionRow1"
     />
     />
     

     View Slide

130. layout_constraintTag & motionTarget
     In Layout…
     motion:layout_constraintTag="ActionRow1"
     />
     Or in MotionScene …
     
     motion:layout_constraintTag="ActionRow1"
     />
     
     motion:layout_constraintTag="ActionRow1"
     />
     />
     Now apply in MotionScene
     
     motion:motionTarget="ActionRow1"
     />
     motion:motionTarget=“ActionRow.*”
     />
     />
     

     View Slide

131. Region Swipe
     

     View Slide

132. motion:dragDirection="dragUp"
     motion:touchAnchorId=“@+id/widget"
     motion:touchAnchorSide=“top" />
     Region Swipe
     Limiting Swipe to regions
     

     View Slide

133. motion:dragDirection="dragUp"
     motion:touchAnchorId=“@+id/widget"
     motion:touchAnchorSide=“top" />
     Region Swipe
     Limiting Swipe to regions
     

     View Slide

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

     View Slide

135. Example
     motion:dragDirection="dragUp"
     motion:touchAnchorId=“@+id/widget"
     motion:touchRegionId="@+id/widget"
     motion:touchAnchorSide=“top" />
     

     View Slide

136. Example
     motion:dragDirection="dragUp"
     motion:touchAnchorId=“@+id/widget"
     motion:touchRegionId="@+id/widget"
     motion:touchAnchorSide=“top" />
     

     View Slide

137. Auto Transition
     

     View Slide

138. motion:constraintSetStart="@+id/a"
     motion:constraintSetEnd=“@+id/n"
     motion:duration=“1000"/>
     Auto Transition
     A B
     Transition
     

     View Slide

139. motion:constraintSetStart="@+id/a"
     motion:constraintSetEnd=“@+id/b"
     motion:autoTransition="animateToStart"
     motion:duration=“1000"/>
     Auto Transition
     A B
     Transition
     

     View Slide

140. Auto Transition
     On start animation
     

     View Slide

141. Auto Transition
     On start animation
     

     View Slide

142. Auto Transition
     On start animation
     START Transition A B
     Transition
     

     View Slide

143. Auto Transition
     motion:constraintSetEnd="@+id/end"
     motion:constraintSetStart=“@+id/start"
     motion:autoTransition=“jumpToEnd"
     motion:duration=“1000">
     "jumpToStart"
     "jumpToEnd"
     "animateToStart"
     "animateToEnd"
     

     View Slide

144. Derived Constraints
     

     View Slide

145. Derived Constraint
     
     
     
     
     motion:visibility=“gone"/>
     
     
     motion:deriveConstraintsFrom="@id/state1">
     
     
     
     
     motion:deriveConstraintsFrom="@id/state2">
     
     
     
     
     Base layout
     

     View Slide

146. Derived Constraint
     
     
     
     
     motion:visibility=“gone"/>
     
     
     motion:deriveConstraintsFrom="@id/state1">
     
     
     
     
     motion:deriveConstraintsFrom="@id/state2">
     
     
     
     
     Base layout
     + view1 gone
     

     View Slide

147. Derived Constraint
     
     
     
     
     motion:visibility=“gone"/>
     
     
     motion:deriveConstraintsFrom="@id/state1">
     
     
     
     
     motion:deriveConstraintsFrom="@id/state2">
     
     
     
     
     Base layout
     + view1 gone
     + view2 gone
     

     View Slide

148. Derived Constraint
     
     
     
     
     motion:visibility=“gone"/>
     
     
     motion:deriveConstraintsFrom="@id/state1">
     
     
     
     
     motion:deriveConstraintsFrom="@id/state2">
     
     
     
     
     Base layout
     + view1 gone
     + view2 gone
     + view3 gone
     

     View Slide

149. Virtual Layout
     Alpha 5
     

     View Slide

150. Flow
     

     View Slide

151. Flow : Virtual Layout
     Helper : reference objets
     Keep a Flat Hierarchy
     On the fly changes
     

     View Slide

152. Flow modes
     1. Apply an horizontal or vertical chain to the elements
     2. Wrap elements as needed, using chains
     3. Wrap elements as needed, aligning in rows & columns
     

     View Slide

153. Flow : a view
     

     View Slide

154. Flow : a view
     Flow is a perfectly normal view
     You can ask it to wrap_content or be of a given size
     You can set up a background
     

     View Slide

155. Flow : XML
     android:id="@+id/flow"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:background="#F8BA00"
     android:padding="10dp"
     app:constraint_referenced_ids="A,B,C"
     app:layout_constraintBottom_toBottomOf="parent"
     app:layout_constraintTop_toTopOf="parent">
     

     View Slide

156. Flow : chains
     

     View Slide

157. Flow mode : chains
     A B C
     Spread
     

     View Slide

158. Flow mode : chains
     A B C
     Spread Inside
     

     View Slide

159. Flow mode : chains
     A B C
     Packed
     

     View Slide

160. Flow : XML
     android:id="@+id/flow"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:background="#F8BA00"
     android:padding="10dp"
     app:flow_horizontalStyle="packed"
     app:flow_horizontalGap="10dp"
     app:constraint_referenced_ids="A,B,C"
     app:layout_constraintBottom_toBottomOf="parent"
     app:layout_constraintTop_toTopOf="parent">
     

     View Slide

161. Flow : XML
     android:id="@+id/flow"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:background="#F8BA00"
     android:padding="10dp"
     app:flow_horizontalStyle=“spread"
     app:flow_horizontalGap="10dp"
     app:constraint_referenced_ids="A,B,C"
     app:layout_constraintBottom_toBottomOf="parent"
     app:layout_constraintTop_toTopOf="parent">
     

     View Slide

162. Flow : XML
     android:id="@+id/flow"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:background="#F8BA00"
     android:padding="10dp"
     app:flow_horizontalStyle=“spread_inside”
     app:flow_horizontalGap="10dp"
     app:constraint_referenced_ids="A,B,C"
     app:layout_constraintBottom_toBottomOf="parent"
     app:layout_constraintTop_toTopOf="parent">
     

     View Slide

163. Flow : Wrap Chains
     

     View Slide

164. Flow mode : wrap chains
     A B C D E F
     

     View Slide

165. Flow mode : wrap chains
     A B C D E F
     

     View Slide

166. Flow mode : wrap chains
     A B C D
     E F
     Wrapping
     Add a new chain
     

     View Slide

167. Flow mode : wrap chains
     A B C D
     E F
     Wrapping
     Spread Chain
     

     View Slide

168. Flow mode : wrap chains
     A B C D
     E F
     Wrapping
     Spread Chain
     Packed Chain
     

     View Slide

169. Flow mode : wrap chains
     A B C
     D E F
     Wrapping : max elements = 3
     (wrap_content)
     

     View Slide

170. Flow mode : wrap chains
     A B C
     D E F
     No Table?
     

     View Slide

171. Flow : Wrap Align
     

     View Slide

172. Flow mode : wrap chains
     A B C
     D E F
     Wrap : chains
     

     View Slide

173. Flow mode : wrap align
     A B C
     D E F
     Wrap : Align
     

     View Slide

174. Example
     

     View Slide

175. Calculator
     

     View Slide

176. View Slide

177. android:id="@+id/flow"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:background="#F8BA00"
     android:padding="20dp"
     app:constraint_referenced_ids="K7,K8,K9,K4,K5,K6,K1,K2,K3,K0,KDiv,KM,KD"
     app:flow_horizontalGap="10dp"
     app:flow_maxElementsWrap="3"
     app:flow_verticalGap="10dp"
     app:flow_wrapMode=“aligned"
     app:layout_constraintBottom_toBottomOf="parent"
     app:layout_constraintEnd_toEndOf="parent"
     app:layout_constraintStart_toStartOf="parent"
     app:layout_constraintTop_toTopOf=“parent" />
     

     View Slide

178. android:id="@+id/flow"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:background="#F8BA00"
     android:padding="20dp"
     app:constraint_referenced_ids="K7,K8,K9,K4,K5,K6,K1,K2,K3,K0,KDiv,KM,KD"
     app:flow_horizontalGap="10dp"
     app:flow_maxElementsWrap="3"
     app:flow_verticalGap="10dp"
     app:flow_wrapMode=“aligned"
     app:layout_constraintBottom_toBottomOf="parent"
     app:layout_constraintEnd_toEndOf="parent"
     app:layout_constraintStart_toStartOf="parent"
     app:layout_constraintTop_toTopOf=“parent" />
     

     View Slide

179. android:id="@+id/flow"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:background="#F8BA00"
     android:padding="20dp"
     app:constraint_referenced_ids="K7,K8,K9,K4,K5,K6,K1,K2,K3,K0,KDiv,KM,KD"
     app:flow_horizontalGap="10dp"
     app:flow_maxElementsWrap="3"
     app:flow_verticalGap="10dp"
     app:flow_wrapMode=“aligned"
     app:layout_constraintBottom_toBottomOf="parent"
     app:layout_constraintEnd_toEndOf="parent"
     app:layout_constraintStart_toStartOf="parent"
     app:layout_constraintTop_toTopOf=“parent" />
     

     View Slide

180. android:id="@+id/flow"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:background="#F8BA00"
     android:padding="20dp"
     app:constraint_referenced_ids="K7,K8,K9,K4,K5,K6,K1,K2,K3,K0,KDiv,KM,KD"
     app:flow_horizontalGap="10dp"
     app:flow_maxElementsWrap="3"
     app:flow_verticalGap="10dp"
     app:flow_wrapMode=“aligned"
     app:layout_constraintBottom_toBottomOf="parent"
     app:layout_constraintEnd_toEndOf="parent"
     app:layout_constraintStart_toStartOf="parent"
     app:layout_constraintTop_toTopOf=“parent" />
     

     View Slide

181. View Slide

182. ...
     app:layout_constraintBottom_toTopOf="@+id/flow"
     app:layout_constraintEnd_toEndOf="@+id/flow"
     app:layout_constraintStart_toStartOf="@+id/flow" />
     

     View Slide

183. ...
     app:layout_constraintEnd_toEndOf=“@+id/KMul"
     app:layout_constraintStart_toStartOf="@+id/KDiv"
     app:layout_constraintTop_toBottomOf=“@+id/KMul" />
     

     View Slide

184. MotionLayout & Flow
     

     View Slide

185. MotionLayout with Flow
     

     View Slide

186. MotionLayout with Flow
     

     View Slide

187. MotionLayout with Flow
     

     View Slide

188. MotionLayout with Flow
     

     View Slide

189. RecyclerView + MotionLayout
     

     View Slide

190. View Slide

191. View Slide

192. View Slide

193. View Slide

194. View Slide

195. View Slide

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

     View Slide

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

     View Slide

198. Basic start to end motion
     

     View Slide

199. Basic start to end motion
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

204. Wrapping up…
     

     View Slide

205. Timeline…
     Alpha 4 : released April 4th
     Alpha 5 : in the next few days!
     Beta 1 around Google IO
     Motion Editor : resume work after Google IO
     

     View Slide

206. developer.android.com
     https://developer.android.com/reference/android/support/constraint/classes.html
     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
     Documentation
     

     View Slide

207. Give us feedback!
     http://issuetracker.google.com
     ConstraintLayout component
     

     View Slide

208. Thanks!
     Nicolas Roard
     @camaelon
     John Hoford
     @johnhoford
     

     View Slide