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!

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