Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ConstraintLayout 2.0

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

Nicolas Roard

April 23, 2019
Tweet

More Decks by Nicolas Roard

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  5. Motion Editor

    View full-size slide

  6. Motion Editor

    View full-size slide

  7. Architecture

    View full-size slide

  8. Architecture
    Linear Solver

    View full-size slide

  9. Architecture
    Constraints Model
    Linear Solver

    View full-size slide

  10. Architecture
    Linear Solver
    Constraints Model
    Optimizer

    View full-size slide

  11. Architecture
    Linear Solver
    Constraints Model
    Optimizer
    Virtual
    Layouts
    Helpers

    View full-size slide

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

    View full-size slide

  13. ConstraintLayout

    View full-size slide

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

    View full-size slide

  15. 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 full-size slide

  16. Circular Reveal

    View full-size slide

  17. Circular Reveal

    View full-size slide

  18. @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 full-size slide

  19. @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 full-size slide

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

    View full-size slide

  21. 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 full-size slide

  22. Bottom Panel
    Decorator

    View full-size slide

  23. Bottom Panel Decorator

    View full-size slide

  24. Bottom Panel Decorator

    View full-size slide

  25. Bottom Panel Decorator

    View full-size slide

  26. Bottom Panel Decorator

    View full-size slide

  27. Bottom Panel Decorator

    View full-size slide

  28. Virtual Layouts

    View full-size slide

  29. MotionLayout

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  47. How to use it?

    View full-size slide

  48. Coordinator

    Layout
    Collapsible

    Toolbar
    From GitHub

    View full-size slide

  49. Coordinator

    Layout
    Collapsible

    Toolbar
    From GitHub

    View full-size slide

  50. DrawerLayout
    From GitHub

    View full-size slide

  51. DrawerLayout
    From GitHub

    View full-size slide

  52. ViewPager
    From GitHub

    View full-size slide

  53. ViewPager
    From GitHub

    View full-size slide

  54. Coordination

    View full-size slide

  55. From GitHub
    Nested

    MotionLayout

    View full-size slide

  56. From GitHub
    Nested

    MotionLayout

    View full-size slide

  57. Start End
    MotionLayout
    2
    MotionLayout
    1

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  60. Key Cycles
    KeyTimeCycles

    &

    KeyCycles

    View full-size slide

  61. Key Cycles
    KeyTimeCycles

    &

    KeyCycles

    View full-size slide

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

    View full-size slide

  63. Monotonic splines
    • Less prone to overshoot

    • Needs to be differentiable and Integrable
    Typical Spline
    Monotonic Spline

    View full-size slide

  64. KeyCycle
    •Period - 1/pos across space

    •Offset - shifts the envelope

    •Attributes - set amplitude of wave

    View full-size slide

  65. KeyCycles Period

    View full-size slide

  66. KeyCycles Period

    View full-size slide

  67. KeyCycles Value

    View full-size slide

  68. KeyCycles Value

    View full-size slide

  69. KeyCycles offset

    View full-size slide

  70. KeyCycles offset

    View full-size slide

  71. KeyCycles waveShape

    View full-size slide

  72. KeyCycles waveShape

    View full-size slide

  73. KeyCycles multiple waves
    translationX
    translationY

    View full-size slide

  74. KeyCycles multiple waves
    translationX
    translationY

    View full-size slide

  75. KeyCycles multiple waves
    translationX
    translationY

    View full-size slide

  76. KeyCycles multiple waves
    translationX
    translationY

    View full-size slide

  77. KeyCycles multiple waves
    translationX
    translationY

    View full-size slide

  78. KeyCycles multiple waves
    translationX
    translationY

    View full-size slide

  79. KeyCycles imagination is the limit
    translationY
    rotation
    translationY
    rotation

    View full-size slide

  80. KeyCycles imagination is the limit
    translationY
    rotation
    translationY
    rotation

    View full-size slide

  81. Introducing CycleEditor
    • Explore the capabilities of KeyCycles

    • XML shown compatible with alpha3

    • Features:

    • Graph multiple cycles

    • Simulate keyCycles effect on a button

    View full-size slide

  82. KeyTimeCycle
    •Period - 1/s (Hz)

    •Offset - shifts the envelope

    •Attributes - set amplitude of wave
    Same attributes as KeyCycle

    View full-size slide

  83. KeyTimeCycles
    Period (Hz)
    KeyTimeCycle
    Attribute
    translationX

    View full-size slide

  84. KeyTimeCycles
    Period (Hz)
    KeyTimeCycle
    Attribute
    translationX

    View full-size slide

  85. KeyTimeCycles (KeyPosition)
    Change the KeyPosition

    View full-size slide

  86. KeyTimeCycles (KeyPosition)
    Change the KeyPosition

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  89. KeyTimeCycles
    Changing value of
    motion:waveOffset
    waveOffset

    View full-size slide

  90. KeyTimeCycles
    Changing value of
    motion:waveOffset
    waveOffset

    View full-size slide

  91. KeyTimeCycles
    Changing value of
    motion:waveShape

    View full-size slide

  92. KeyTimeCycles
    Changing value of
    motion:waveShape

    View full-size slide

  93. What’s new

    View full-size slide

  94. Alpha 3
    MotionLayout

    View full-size slide

  95. alpha 3
    New XML format
    KeyTimeCycle
    KeyTrigger

    View full-size slide

  96. Alpha 4
    MotionLayout

    View full-size slide

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

    View full-size slide

  98. MotionLayout
    Alpha 5

    View full-size slide

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


    View full-size slide

  100. Target Matching

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    motion:layout_constraintTag="ActionRow1"
    />

    motion:layout_constraintTag="ActionRow1"
    />
    />

    View full-size slide

  105. 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 full-size slide

  106. Region Swipe

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  112. Auto Transition

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  115. Auto Transition
    On start animation

    View full-size slide

  116. Auto Transition
    On start animation

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  119. Derived Constraints

    View full-size slide

  120. Derived Constraint




    motion:visibility=“gone"/>


    motion:deriveConstraintsFrom="@id/state1">




    motion:deriveConstraintsFrom="@id/state2">




    Base layout

    View full-size slide

  121. Derived Constraint




    motion:visibility=“gone"/>


    motion:deriveConstraintsFrom="@id/state1">




    motion:deriveConstraintsFrom="@id/state2">




    Base layout
    + view1 gone

    View full-size slide

  122. Derived Constraint




    motion:visibility=“gone"/>


    motion:deriveConstraintsFrom="@id/state1">




    motion:deriveConstraintsFrom="@id/state2">




    Base layout
    + view1 gone
    + view2 gone

    View full-size slide

  123. Derived Constraint




    motion:visibility=“gone"/>


    motion:deriveConstraintsFrom="@id/state1">




    motion:deriveConstraintsFrom="@id/state2">




    Base layout
    + view1 gone
    + view2 gone
    + view3 gone

    View full-size slide

  124. Virtual Layout
    Alpha 5

    View full-size slide

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

    View full-size slide

  126. 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 full-size slide

  127. Flow : a view

    View full-size slide

  128. 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 full-size slide

  129. 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 full-size slide

  130. Flow : chains

    View full-size slide

  131. Flow mode : chains
    A B C
    Spread

    View full-size slide

  132. Flow mode : chains
    A B C
    Spread Inside

    View full-size slide

  133. Flow mode : chains
    A B C
    Packed

    View full-size slide

  134. 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 full-size slide

  135. 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 full-size slide

  136. 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 full-size slide

  137. Flow : Wrap Chains

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  145. Flow : Wrap Align

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  148. 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 full-size slide

  149. 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 full-size slide

  150. 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 full-size slide

  151. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  154. MotionLayout & Flow

    View full-size slide

  155. MotionLayout with Flow

    View full-size slide

  156. MotionLayout with Flow

    View full-size slide

  157. MotionLayout with Flow

    View full-size slide

  158. MotionLayout with Flow

    View full-size slide

  159. RecyclerView + MotionLayout

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  162. Basic start to end motion

    View full-size slide

  163. Basic start to end motion

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  168. Wrapping up…

    View full-size slide

  169. 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 full-size slide

  170. 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 full-size slide

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

    View full-size slide

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

    View full-size slide