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

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!

Nicolas Roard

November 25, 2019
Tweet

More Decks by Nicolas Roard

Other Decks in Programming

Transcript

  1. DroidconSF 2019
    MotionLayout

    & Motion Editor
    Animation made easy
    John Hoford

    @johnhoford
    Nicolas Roard

    @camaelon

    View Slide

  2. DroidconSF 2019
    So, what is Motion Layout ?

    View Slide

  3. DroidconSF 2019
    MotionLayout
    Viewgroup

    View Slide

  4. DroidconSF 2019
    MotionLayout
    ConstraintLayout

    View Slide

  5. DroidconSF 2019
    MotionLayout
    ConstraintLayout
    Relative Constraints
    Center Constraints
    Dimension Constraints
    Chains
    Virtual Layouts
    Guidelines
    Barriers
    Flow
    Circular Constraints
    Helpers

    View Slide

  6. DroidconSF 2019
    What does it do?

    View Slide

  7. DroidconSF 2019
    MotionLayout
    Position views
    Animation
    Touch Handling
    State

    View Slide

  8. DroidconSF 2019
    MotionLayout
    Position views
    Animation
    Touch Handling
    State

    View Slide

  9. DroidconSF 2019
    MotionLayout
    Position views
    Animation
    Touch Handling
    State

    View Slide

  10. DroidconSF 2019
    MotionLayout
    Position views
    Animation
    Touch Handling
    State

    View Slide

  11. DroidconSF 2019
    How?

    View Slide

  12. DroidconSF 2019
    MotionLayout
    Transition between states

    View Slide

  13. DroidconSF 2019
    MotionLayout
    Transition
    Start State End State

    View Slide

  14. DroidconSF 2019
    MotionLayout
    Transition
    Start State End State
    Keyframes

    View Slide

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

    View Slide

  16. DroidconSF 2019
    Organization









    xml/
    app:layoutDescription=“@xml/
    my_motion_scene”>







    layout/

    View Slide

  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)

    View Slide


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





    Constraint Set
    Motion Layout

    View Slide

  19. Transition
    •OnClick/OnSwipe

    Integrated touch handling

    •KeyFrameSet

    Modify the transition
















    Motion Layout

    View Slide

  20. Keyframes

    KeyPosition
    KeyAttribute
    KeyTrigger
    KeyCycles
    KeyTimeCycle
    Motion Layout

    View Slide

  21. KeyPosition
    Motion Layout
    parentRelative
    Coordinate Systems

    View Slide

  22. KeyPosition
    Motion Layout
    deltaRelative
    Coordinate Systems

    View Slide

  23. KeyPosition
    Motion Layout
    pathRelative
    Coordinate Systems

    View Slide

  24. KeyCycle
    Motion Layout
    Making properties oscillate

    View Slide

  25. KeyTimeCycle
    Motion Layout
    Oscillate in time

    View Slide

  26. DroidconSF 2019
    Demo

    View Slide

  27. View Slide

  28. DroidconSF 2019
    Where to use it

    View Slide

  29. DroidconSF 2019
    Integrate with

    existing components

    View Slide

  30. Coordinator

    Layout

    +

    Collapsible

    Toolbar

    View Slide

  31. DrawerLayout

    View Slide

  32. ViewPager

    View Slide

  33. DroidconSF 2019
    Coordinate Views

    View Slide

  34. View Slide

  35. Nested

    MotionLayout

    View Slide

  36. Start End
    MotionLayout

    2
    MotionLayout

    1
    Start End
    MotionLayout
    2
    MotionLayout
    1

    View Slide

  37. DroidconSF 2019
    Programmatic Control

    View Slide

  38. DroidconSF 2019
    RecyclerView

    View Slide

  39. RecyclerView

    +

    MotionLayout

    View Slide

  40. RecyclerView

    +

    MotionLayout

    View Slide

  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);

    View Slide

  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);

    View Slide

  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);

    View Slide

  44. RecyclerView

    +

    MotionLayout

    View Slide

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

    View Slide

  46. RecyclerView

    +

    MotionLayout

    View Slide

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

    View Slide

  48. RecyclerView

    +

    MotionLayout

    View Slide

  49. DroidconSF 2019
    Dynamic Histogram

    View Slide

  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

    View Slide

  51. DroidconSF 2019
    MotionLayout List

    View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. Start
    Next
    Previous

    View Slide

  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);
    }
    }

    View Slide

  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);
    }
    }

    View Slide

  58. View Slide

  59. View Slide

  60. View Slide

  61. View Slide

  62. All together…

    View Slide

  63. View Slide

  64. View Slide

  65. MotionLayout

    List

    View Slide

  66. MotionLayout

    List

    View Slide

  67. DroidconSF 2019
    Motion Editor

    View Slide

  68. View Slide

  69. View Slide

  70. View Slide

  71. View Slide

  72. Overview Panel

    View Slide

  73. Overview Panel
    1. Creation Icons

    2. Overview Graph
    2
    1

    View Slide

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

    View Slide

  75. Overview Panel
    Creation in
    action

    View Slide

  76. Overview Panel
    2.Overview Graph

    View Slide

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

    View Slide

  78. Overview Panel
    Motion Layout Constraint Sets
    Transition
    Gesture

    View Slide

  79. Overview Panel

    motion:constraintSetEnd="@+id/end"
    motion:constraintSetStart="@id/start"
    motion:duration=“1000”>







    View Slide


  80. motion:constraintSetStart=“@id/small"
    motion:constraintSetEnd="@+id/base"
    motion:duration="1000">


    motion:constraintSetStart=“@id/small"
    motion:constraintSetEnd="@+id/state1"
    motion:duration="1000">

    motion:constraintSetStart=“@id/base”
    motion:constraintSetEnd="@+id/state1"
    motion:duration="1000">

    motion:deriveConstraintsFrom="@id/base"> ...

    motion:deriveConstraintsFrom="@id/base"> ...



    motion:deriveConstraintsFrom="@id/base"> ...

    Overview Panel

    View Slide

  81. Overview Panel
    Overview Graph as
    State Control Unit

    View Slide

  82. Overview Panel

    View Slide

  83. View Slide

  84. View Slide

  85. Selection Panel

    View Slide

  86. Selection Panel
    Selection Panel
    1. Motion Layout selected

    2. Constraint Set selected

    3. Transition selected
    1
    2
    3

    View Slide

  87. Selection Panel
    1. Motion Layout
    Selected

    View Slide

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

    View Slide

  89. Selection Panel
    2.Constraint Set
    Selected

    View Slide

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

    View Slide

  91. Selection Panel

    View Slide

  92. Selection Panel
    3.Transition
    Selected

    View Slide

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

    View Slide

  94. View Slide

  95. View Slide

  96. Attributes Panel

    View Slide

  97. Attributes Panel
    Attributes Panel
    1. Reflecting Selection

    2. Showing Inheritance

    3. Authoring Constraints

    4.Adding Custom Attributes

    View Slide

  98. Attributes panel reflects
    declared & potential attributes
    of whatever is selected
    Attributes Panel
    1. Reflecting
    Selection

    View Slide

  99. Inherited Declared
    Attributes panel reflects
    inherited v.s. declared attributes
    with greyed-out & black values
    2.Showing
    Inheritance
    Attributes Panel

    View Slide

  100. Attributes Panel
    3.Authoring Constraints

    View Slide

  101. View Slide

  102. Attributes Panel
    4.Adding Custom Attributes

    View Slide

  103. View Slide

  104. DroidconSF 2019
    Demo !

    View Slide

  105. Andrew Watson

    @creativedrewy

    View Slide

  106. View Slide

  107. View Slide

  108. DroidconSF 2019
    Wrap up

    View Slide

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

    ConstraintLayout 2.0 Beta 3

    View Slide

  110. DroidconSF 2019
    Layout Editor

    Navigation Editor

    Resource Manager

    Compose Tooling

    Multi Preview

    Layout Inspector

    Motion Editor
    Android Studio
    Design Tools

    View Slide

  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

    View Slide

  112. DroidconSF 2019
    ConstraintLayout & MotionLayout

    Workshop
    when?

    where?
    Android Studio

    ConstraintLayout
    5:10 PM

    Fisher East
    4.0 canary 4

    2.0.0-beta3

    View Slide

  113. DroidconSF 2019
    Thank you!
    John Hoford

    @johnhoford
    Nicolas Roard

    @camaelon

    View Slide

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

    View Slide