MotionLayout & Motion Editor

MotionLayout & Motion Editor

MotionLayout is a new class in ConstraintLayout 2.0 dramatically simplifying the creation of animations, particularly related to handling motion and touch events. This session will cover what the library is capable of, where it makes sense to use it, and how to take advantage of the upcoming Motion Editor in Android Studio to quickly add motion to your application!

B9012970f22b84c5b344ffa6f8a884d5?s=128

Nicolas Roard

November 25, 2019
Tweet

Transcript

  1. DroidconSF 2019 MotionLayout & Motion Editor Animation made easy John

    Hoford @johnhoford Nicolas Roard @camaelon
  2. DroidconSF 2019 So, what is Motion Layout ?

  3. DroidconSF 2019 MotionLayout Viewgroup

  4. DroidconSF 2019 MotionLayout ConstraintLayout

  5. DroidconSF 2019 MotionLayout ConstraintLayout Relative Constraints Center Constraints Dimension Constraints

    Chains Virtual Layouts Guidelines Barriers Flow Circular Constraints Helpers
  6. DroidconSF 2019 What does it do?

  7. DroidconSF 2019 MotionLayout Position views Animation Touch Handling State

  8. DroidconSF 2019 MotionLayout Position views Animation Touch Handling State

  9. DroidconSF 2019 MotionLayout Position views Animation Touch Handling State

  10. DroidconSF 2019 MotionLayout Position views Animation Touch Handling State

  11. DroidconSF 2019 How?

  12. DroidconSF 2019 MotionLayout Transition between states

  13. DroidconSF 2019 MotionLayout Transition Start State End State

  14. DroidconSF 2019 MotionLayout Transition Start State End State Keyframes

  15. DroidconSF 2019 Multiple States State A State B State C

    State D
  16. DroidconSF 2019 Organization <ConstraintSet> <Constraint> <Constraint> <Constraint> <ConstraintSet> <Constraint> <Constraint>

    <Constraint> <Transition> xml/ <MotionLayout app:layoutDescription=“@xml/ my_motion_scene”> <Views> <Views> <Views> <Views> <Views> <Views> <Views> layout/
  17. DroidconSF 2019 States Base State MotionLayout States Position with constraints

    All view attributes Position with constraints Transform view attributes Custom properties Motion attributes (layout file)
  18. <ConstraintSet android:id=“@+id/start"> <Constraint android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="0dp" motion:layout_constraintTop_toTopOf="parent" motion:layout_constraintStart_toStartOf="parent" android:layout_marginTop="0dp"

    /> </ConstraintSet> <ConstraintSet> <Constraint> <Constraint> <Constraint> Constraint Set Motion Layout
  19. Transition •OnClick/OnSwipe Integrated touch handling •KeyFrameSet Modify the transition <Transition>

    <OnSwipe> <OnClick> <Key[Frames]> <Key[Frames]> <Key[Frames]> <Key[Frames]> <Key[Frames]> <Key[Frames]> <Key[Frames]> <Key[Frames]> <Key[Frames]> <Key[Frames]> <Key[Frames]> <Key[Frames]> <KeyFrameSet> Motion Layout
  20. Keyframes <KeyFrameSet> KeyPosition KeyAttribute KeyTrigger KeyCycles KeyTimeCycle Motion Layout

  21. KeyPosition Motion Layout parentRelative Coordinate Systems

  22. KeyPosition Motion Layout deltaRelative Coordinate Systems

  23. KeyPosition Motion Layout pathRelative Coordinate Systems

  24. KeyCycle Motion Layout Making properties oscillate

  25. KeyTimeCycle Motion Layout Oscillate in time

  26. DroidconSF 2019 Demo

  27. None
  28. DroidconSF 2019 Where to use it

  29. DroidconSF 2019 Integrate with existing components

  30. Coordinator Layout + Collapsible Toolbar

  31. DrawerLayout

  32. ViewPager

  33. DroidconSF 2019 Coordinate Views

  34. None
  35. Nested MotionLayout

  36. Start End MotionLayout 2 MotionLayout 1 Start End MotionLayout 2

    MotionLayout 1
  37. DroidconSF 2019 Programmatic Control

  38. DroidconSF 2019 RecyclerView

  39. RecyclerView + MotionLayout

  40. RecyclerView + MotionLayout

  41. ConstraintSet set = parentMotion.getConstraintSet(R.id.start); set.clear(R.id.rvItem); set.constrainWidth(R.id.rvItem, getWidth()); set.constrainHeight(R.id.rvItem, getHeight()); int

    dx = bounds.left - motionBounds.left; int dy = bounds.top - motionBounds.top; set.connect(R.id.rvItem, ConstraintSet.LEFT, ConstraintSet.PARENT_ID, ConstraintSet.LEFT, dx); set.connect(R.id.rvItem, ConstraintSet.TOP, ConstraintSet.PARENT_ID, ConstraintSet.TOP, dy);
  42. ConstraintSet set = parentMotion.getConstraintSet(R.id.start); set.clear(R.id.rvItem); set.constrainWidth(R.id.rvItem, getWidth()); set.constrainHeight(R.id.rvItem, getHeight()); int

    dx = bounds.left - motionBounds.left; int dy = bounds.top - motionBounds.top; set.connect(R.id.rvItem, ConstraintSet.LEFT, ConstraintSet.PARENT_ID, ConstraintSet.LEFT, dx); set.connect(R.id.rvItem, ConstraintSet.TOP, ConstraintSet.PARENT_ID, ConstraintSet.TOP, dy);
  43. ConstraintSet set = parentMotion.getConstraintSet(R.id.start); set.clear(R.id.rvItem); set.constrainWidth(R.id.rvItem, getWidth()); set.constrainHeight(R.id.rvItem, getHeight()); int

    dx = bounds.left - motionBounds.left; int dy = bounds.top - motionBounds.top; set.connect(R.id.rvItem, ConstraintSet.LEFT, ConstraintSet.PARENT_ID, ConstraintSet.LEFT, dx); set.connect(R.id.rvItem, ConstraintSet.TOP, ConstraintSet.PARENT_ID, ConstraintSet.TOP, dy);
  44. RecyclerView + MotionLayout

  45. <KeyPosition motion:framePosition="40" motion:percentX="0" motion:percentWidth="0" motion:percentHeight="0" motion:motionTarget="@id/rvItem" />

  46. RecyclerView + MotionLayout

  47. <KeyAttribute android:rotationX="-20" motion:framePosition="60" motion:motionTarget="@id/rvItem"/>

  48. RecyclerView + MotionLayout

  49. DroidconSF 2019 Dynamic Histogram

  50. Motion Layout From Code 1. Create a Transition() 2. Create

    ConstraintSet() x 2 and set on the transition 3. Update ConstraintSets as needed 4. Trigger the MotionLayout animation from the start to end motionLayout.transitionToEnd() Tutorial coming soon!! Dynamically updated histogram
  51. DroidconSF 2019 MotionLayout List

  52. None
  53. None
  54. None
  55. Start Next Previous

  56. if (state == R.id.next) { if (counter < myImgDataset.length -1)

    { counter++; motionLayout.setProgress(0); updateImages(counter); if (counter < myImgDataset.length - 1) { goNextPosition(); } } else if (counter >= myImgDataset.length - 1) { motionLayout.setProgress(0); } }
  57. if (state == R.id.next) { if (counter < myImgDataset.length -1)

    { counter++; motionLayout.setProgress(0); updateImages(counter); if (counter < myImgDataset.length - 1) { goNextPosition(); } } else if (counter >= myImgDataset.length - 1) { motionLayout.setProgress(0); } }
  58. None
  59. None
  60. None
  61. None
  62. All together…

  63. None
  64. None
  65. MotionLayout List

  66. MotionLayout List

  67. DroidconSF 2019 Motion Editor

  68. None
  69. None
  70. None
  71. None
  72. Overview Panel

  73. Overview Panel 1. Creation Icons 2. Overview Graph 2 1

  74. Overview Panel + Constraint Set 1. Creation Icons + Transition

    + Gesture
  75. Overview Panel Creation in action

  76. Overview Panel 2.Overview Graph

  77. Motion Layout Constraint Sets Transition Gesture 2.Overview Graph Overview Panel

  78. Overview Panel Motion Layout Constraint Sets Transition Gesture

  79. Overview Panel <MotionScene> <Transition motion:constraintSetEnd="@+id/end" motion:constraintSetStart="@id/start" motion:duration=“1000”> <OnClick /> </Transition>

    <ConstraintSet android:id=“@+id/start”> … </ConstraintSet> <ConstraintSet android:id=“@+id/end”> … </ConstraintSet> </MotionScene>
  80. <MotionScene> <Transition motion:constraintSetStart=“@id/small" motion:constraintSetEnd="@+id/base" motion:duration="1000"> <OnClick /> </Transition> <Transition motion:constraintSetStart=“@id/small"

    motion:constraintSetEnd="@+id/state1" motion:duration="1000"> </Transition> <Transition motion:constraintSetStart=“@id/base” motion:constraintSetEnd="@+id/state1" motion:duration="1000"> </Transition> <ConstraintSet android:id=“@+id/alt" motion:deriveConstraintsFrom="@id/base"> ... </ConstraintSet> <ConstraintSet android:id=“@+id/small" motion:deriveConstraintsFrom="@id/base"> ... </ConstraintSet> <ConstraintSet android:id=“@+id/base”> </ConstraintSet> <ConstraintSet android:id=“@+id/state1” motion:deriveConstraintsFrom="@id/base"> ... </ConstraintSet> </MotionScene> Overview Panel
  81. Overview Panel Overview Graph as State Control Unit

  82. Overview Panel

  83. None
  84. None
  85. Selection Panel

  86. Selection Panel Selection Panel 1. Motion Layout selected 2. Constraint

    Set selected 3. Transition selected 1 2 3
  87. Selection Panel 1. Motion Layout Selected

  88. Selection Panel 1. Motion Layout Selected What Component? Properly Constrained?

  89. Selection Panel 2.Constraint Set Selected

  90. Selection Panel 2.Constraint Set Selected Constrained? Where? What Component?

  91. Selection Panel

  92. Selection Panel 3.Transition Selected

  93. Selection Panel 3.Transition Selected Timeline & Scrubber Animation Toolbar Keyframes

    + Keyframe
  94. None
  95. None
  96. Attributes Panel

  97. Attributes Panel Attributes Panel 1. Reflecting Selection 2. Showing Inheritance

    3. Authoring Constraints 4.Adding Custom Attributes
  98. Attributes panel reflects declared & potential attributes of whatever is

    selected Attributes Panel 1. Reflecting Selection
  99. Inherited Declared Attributes panel reflects inherited v.s. declared attributes with

    greyed-out & black values 2.Showing Inheritance Attributes Panel
  100. Attributes Panel 3.Authoring Constraints

  101. None
  102. Attributes Panel 4.Adding Custom Attributes

  103. None
  104. DroidconSF 2019 Demo !

  105. Andrew Watson @creativedrewy

  106. None
  107. None
  108. DroidconSF 2019 Wrap up

  109. DroidconSF 2019 Check it out Android Studio 4.0 Canary 4

    ConstraintLayout 2.0 Beta 3
  110. DroidconSF 2019 Layout Editor Navigation Editor Resource Manager Compose Tooling

    Multi Preview Layout Inspector Motion Editor Android Studio Design Tools
  111. DroidconSF 2019 http://issuetracker.google.com Android Public Tracker > App Development >

    Jetpack (androidx) > ConstraintLayout > Android Studio > Design Tools > Motion Editor ConstraintLayout component Motion Editor component
  112. DroidconSF 2019 ConstraintLayout & MotionLayout Workshop when? where? Android Studio

    ConstraintLayout 5:10 PM Fisher East 4.0 canary 4 2.0.0-beta3
  113. DroidconSF 2019 Thank you! John Hoford @johnhoford Nicolas Roard @camaelon

  114. DroidconSF 2019 MotionLayout workshop camaelon.github.io codelabs.developers.google.com/codelabs/ motion-layout