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 ConstraintLayout Relative Constraints Center Constraints Dimension Constraints

    Chains Virtual Layouts Guidelines Barriers Flow Circular Constraints Helpers
  2. 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/
  3. 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)
  4. 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
  5. 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);
  6. 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);
  7. 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);
  8. 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
  9. 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); } }
  10. 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); } }
  11. 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>
  12. <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
  13. Attributes Panel Attributes Panel 1. Reflecting Selection 2. Showing Inheritance

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

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

    greyed-out & black values 2.Showing Inheritance Attributes Panel
  16. DroidconSF 2019 Layout Editor Navigation Editor Resource Manager Compose Tooling

    Multi Preview Layout Inspector Motion Editor Android Studio Design Tools
  17. 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
  18. DroidconSF 2019 ConstraintLayout & MotionLayout Workshop when? where? Android Studio

    ConstraintLayout 5:10 PM Fisher East 4.0 canary 4 2.0.0-beta3