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.

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!
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
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