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

Advanced Design Patterns with ConstraintLayout 2.1

Advanced Design Patterns with ConstraintLayout 2.1

https://360andev.com/session/advanced-design-patterns-with-constraintlayout-2-1/

ConstraintLayout 2.0 brought many new concepts to your developer’s toolbox, specifically around Motion & Animation with MotionLayout. With the 2.1 release, we are expanding the use cases that can be addressed by the library, with new powerful approaches like ViewTransition and new helpers, simplifying how you can handle Motion design and modern design languages.

In this talk, we will cover those new features and see how they can be applied to build compelling user interfaces that can adapt to new form factors like tablets and foldable devices. Finally, we’ll also demonstrate some of the upcoming features of MotionLayout in Compose.

B9012970f22b84c5b344ffa6f8a884d5?s=128

Nicolas Roard

July 23, 2021
Tweet

Transcript

  1. Advanced Design Pa tt erns with ConstraintLayout 2.1 John Hoford

    @johnhoford Nicolas Roard @camaelon
  2. Overview

  3. ConstraintLayout 1.0 • Flexible Layout Manager • Positions relatively, in

    percentage, as a set (chain) • Dimensions : ratio, percentage, weight… • Helpers : Guideline, Barriers… • ConstraintSet : build your layout rules on the fl y, swap them • Layout Editor
  4. ConstraintLayout 2.0 • Virtual Layouts • Helpers & Decorators •

    Programming APIs • MotionLayout • Motion Editor
  5. ConstraintLayout 2.1 • Scalability • View Transitions • Rotation •

    Motion Helpers • Foldable Support
  6. ConstraintLayout 1.0

  7. ConstraintLayout 1.0 Compose

  8. ConstraintLayout 1.0 • Kotlin DSL for constraints • ConstraintSet support

    • JSON support • MotionLayout light Compose
  9. 2.1

  10. Scalability 
 MotionScene fi les are getting large!

  11. Scalability • Includes - Support separate ConstraintSet fi les •

    ConstraintOverlay - compact way of modifying derived constraints • ViewTransitions - Dynamic mutation of state
  12. <include> • ConstraintSet can now be in separate fi les

    • Referenced through includes
 <include motion:constraintSet="@xml/alternate" / > • Or directly in Transitions
 motion:constraintSetEnd="@xml/main_scene "
  13. <ConstraintOverrid> • Only need to specify the id and the

    attributes to change <ConstraintSet android:id="@+id/start" > <ConstraintOverride android:id="@+id/ball0" android:alpha="0" / > <ConstraintOverride android:id="@+id/ball4" android:alpha="0" / > <ConstraintOverride android:id="@+id/ball2" android:alpha="0" / > <ConstraintOverride android:id="@+id/ball6" android:alpha="0" / > <ConstraintOverride android:id="@+id/ball3" android:alpha="0" / > <ConstraintOverride android:id="@+id/ball1" android:alpha="0" / > <ConstraintOverride android:id="@+id/ball7" android:alpha="0" / > <ConstraintOverride android:id="@+id/ball5" android:alpha="0" / > </ConstraintSet >
  14. <ViewTransitions> • Operates on one or more views • Can

    modify the current state <ViewTransitio n android:id=“@+id/remove " motion:motionTarget="@+id/textView2 " motion:viewTransitionMode="currentState " motion:duration="1000"> <ConstraintOverride android:visibility=“gone"/ > </ViewTransition> <ViewTransitio n android:id=“@+id/restore " motion:motionTarget="@+id/textView2 " motion:viewTransitionMode="currentState " motion:duration="1000"> <ConstraintOverride android:visibility=“visible”/ > </ViewTransition>
  15. <ViewTransitions> • Operates on one or more views • Can

    modify all ConstraintSets <ViewTransitio n android:id=“@+id/remove " motion:motionTarget="@+id/textView2 " motion:viewTransitionMode="allStates " motion:duration="1000" > <ConstraintOverride android:visibility=“gone"/ > </ViewTransition> <ViewTransitio n android:id=“@+id/restore " motion:motionTarget="@+id/textView2 " motion:viewTransitionMode="allStates " motion:duration="1000" > <ConstraintOverride android:visibility=“visible”/ > </ViewTransition>
  16. <ViewTransitions> • Can modify all noState These can run asynchronous

    <ViewTransitio n android:id="@+id/spin " motion:motionTarget="button.* " motion:viewTransitionMode="noState " motion:onStateTransition="actionDownUp " motion:upDuration = "700 " motion:duration="200" > <KeyFrameSet > <KeyAttribute motion:framePosition="30" > <CustomAttribut e motion:attributeName="roundPercent " motion:customFloatValue=".3" / > <CustomAttribut e motion:attributeName="background " motion:customColorDrawableValue="#AE7088" / > </KeyAttribute > </KeyFrameSet > </ViewTransition >
  17. <ViewTransitions> • Can modify all noState These can run asynchronous

    <ViewTransitio n android:id="@+id/spin " motion:motionTarget="button.* " motion:viewTransitionMode="noState " motion:onStateTransition="actionDownUp " motion:upDuration = "700 " motion:duration="200" > <KeyFrameSet > <KeyAttribute motion:framePosition="30" > <CustomAttribut e motion:attributeName="roundPercent " motion:customFloatValue=".3" / > <CustomAttribut e motion:attributeName="background " motion:customColorDrawableValue="#AE7088" / > </KeyAttribute > </KeyFrameSet > </ViewTransition >
  18. Rotation

  19. Rotation ConstraintLayout Relative Position 45° 80dp 30dp 135° <Constraint id="earth"

    app:layout_constraintCircleRadius ="80dp" app:layout_constraintCircleAngle. ="45" app:layout_constraintCircle. =“@id/sun” / > <Constraint id="moon" app:layout_constraintCircleRadius ="30dp" app:layout_constraintCircleAngle. ="135" app:layout_constraintCircle. =“@id/sun” / >
  20. Rotation ConstraintLayout Relative Position • Changing values in motion Layout

  21. Rotation ConstraintLayout Relative Position • Changing values in motion Layout

  22. Rotation Polar Mode <Constraint android:id="@id/moon" > <Motion motion:animateRelativeTo="@+id/earth" / >

    </Constraint > <Constraint android:id="@id/earth" > <Motion motion:animateRelativeTo=“@+id/sun” / > </Constraint >
  23. Rotation Polar Mode <Constraint android:id="@id/moon" > <Motion motion:animateRelativeTo="@+id/earth" / >

    </Constraint > <Constraint android:id="@id/earth" > <Motion motion:animateRelativeTo=“@+id/sun” / > </Constraint >
  24. Rotation Polar Mode • Setting layout_constraintCircleAngle
 is understood by the

    polar mode 
 app:layout_constraintCircleAngle. ="360"
  25. Rotation Polar Mode • Setting layout_constraintCircleAngle
 is understood by the

    polar mode 
 app:layout_constraintCircleAngle. ="360"
  26. Rotation Polar Mode • They chain 
 moon relative to

    earth
 earth relative to sun
  27. Rotation Polar Mode • They chain 
 moon relative to

    earth
 earth relative to sun
  28. Rotation Polar Mode KeyPosition In Polar mode • KeyPosition works

    in polar
 percentX is radial change
 percentY is in Angular change
  29. Rotation Polar Mode KeyPosition In Polar mode • KeyPosition works

    in polar
 percentX is radial change
 percentY is in Angular change
  30. Rotation Polar Mode KeyPosition In Polar mode • Rocket maintains

    orbit
 Then moves out to the moon
  31. Rotation Polar Mode KeyPosition In Polar mode • Rocket maintains

    orbit
 Then moves out to the moon
  32. • KeyPosition 
 percentX maintains radial distance
 percentY locks the

    rotation % Rotation Polar Mode KeyPosition In Polar mode
  33. • KeyPosition 
 percentX maintains radial distance
 percentY locks the

    rotation % Rotation Polar Mode KeyPosition In Polar mode
  34. • OnSwipe now support rotation via:
 dragDirection , anchorTarget, rotationCenterId

    • Transform Pivot target can be center of a view Rotation OnSwipe Rotational support <OnSwip e motion:dragDirection="dragClockwise" motion:rotationCenterId="@+id/earth" / > <Constraint android:id="@+id/dial" > <Transform android:rotation="0" motion:transformPivotTarget=“@+id/earth " / > </Constraint>
  35. • OnSwipe now support rotation via:
 dragDirection , anchorTarget, rotationCenterId

    • Transform Pivot target can be center of a view Rotation OnSwipe Rotational support <OnSwip e motion:dragDirection="dragClockwise" motion:rotationCenterId="@+id/earth" / > <Constraint android:id="@+id/dial" > <Transform android:rotation="0" motion:transformPivotTarget=“@+id/earth " / > </Constraint>
  36. Miscellaneous

  37. Quantized Motion <Constraint android:id="@id/image1" > <Motio n motion:quantizeMotionSteps="12" motion:quantizeMotionInterpolator="bounce" /

    > </Constraint >
  38. Quantized Motion <Constraint android:id="@id/image1" > <Motio n motion:quantizeMotionSteps="12" motion:quantizeMotionInterpolator="bounce" /

    > </Constraint >
  39. Animated Text MotionLabel

  40. Animated Text MotionLabel

  41. <OnSwipe> Springs!

  42. <OnSwipe> Springs!

  43. Many new api • Programatic addition of Transitions • applyViewTransition()

    run a view Transitions • scheduleTransitionTo() After completing current transition go next one • updateStateAnimate() - modi fi ed version of current constraintSet animated • transitionToState(…,duration) - transition over a fi xed duration
  44. Motion Helpers

  45. MotionE ff ect

  46. MotionE ff ect

  47. MotionE ff ect

  48. MotionE ff ect

  49. MotionE ff ect + ViewTransition

  50. MotionE ff ect + ViewTransition

  51. Carousel h tt ps://developer.android.com/training/constraint-layout/motionlayout/carousel

  52. Carousel h tt ps://developer.android.com/training/constraint-layout/motionlayout/carousel

  53. Foldable support

  54. Foldable Support • https://developer.android.com/training/constraint-layout/foldables

  55. Foldable Support • https://developer.android.com/training/constraint-layout/foldables

  56. Compose

  57. ConstraintLayout / Compose • Share code with existing implementation •

    Kotlin DSL to express constraints • JSON syntax to express constraints • Work in Progress : we want your feedback!
  58. None
  59. None
  60. None
  61. None
  62. None
  63. None
  64. None
  65. Variables: { angle: { from: 0, step: 10 }, rotation:

    { from: 'startRotation', step: 10 }, distance: 100, mylist: { tag: 'box' } }, Generate: { mylist: { width: 200, height: 40, circular: ['parent', 'angle', 'distance'], pivotX: 0.1, pivotY: 0.1, translationX: 225, rotationZ: 'rotation' } }
  66. Variables: { angle: { from: 0, step: 10 }, rotation:

    { from: 'startRotation', step: 10 }, distance: 100, mylist: { tag: 'box' } }, Generate: { mylist: { width: 200, height: 40, circular: ['parent', 'angle', 'distance'], pivotX: 0.1, pivotY: 0.1, translationX: 225, rotationZ: 'rotation' } }
  67. MotionLayout / Compose • 2 ConstraintSets or a single MotionScene

    in JSON • “Light” • No support for touch • No support for multi-states • Check examples • https://github.com/androidx/constraintlayout/tree/main/ projects/ComposeConstraintLayout
  68. Link

  69. None
  70. None
  71. Where we are now

  72. ConstraintLayout 2.1.0-rc01 dependencies { implementation ‘androidx.constraintlayout:constraintlayout:2.1.0-rc01 ’ } h tt

    ps://github.com/AndroidX/constraintlayout
  73. ConstraintLayout Compose 1.0.0-beta01 dependencies { implementation ‘androidx.constraintlayout:constraintlayout-compose:1.0.0-beta01 ’ } h

    tt ps://github.com/AndroidX/constraintlayout
  74. Give us feedback! https://github.com/androidx/constraintlayout/issues

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