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.

Nicolas Roard

July 23, 2021
Tweet

More Decks by Nicolas Roard

Other Decks in Programming

Transcript

  1. 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
  2. ConstraintLayout 2.0 • Virtual Layouts • Helpers & Decorators •

    Programming APIs • MotionLayout • Motion Editor
  3. 2.1

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

    ConstraintOverlay - compact way of modifying derived constraints • ViewTransitions - Dynamic mutation of state
  5. <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 "
  6. <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 >
  7. <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>
  8. <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>
  9. <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 >
  10. <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 >
  11. 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” / >
  12. 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 >
  13. 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 >
  14. Rotation Polar Mode • Setting layout_constraintCircleAngle
 is understood by the

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

    polar mode 
 app:layout_constraintCircleAngle. ="360"
  16. Rotation Polar Mode KeyPosition In Polar mode • KeyPosition works

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

    in polar
 percentX is radial change
 percentY is in Angular change
  18. • KeyPosition 
 percentX maintains radial distance
 percentY locks the

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

    rotation % Rotation Polar Mode KeyPosition In Polar mode
  20. • 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>
  21. • 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>
  22. 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
  23. ConstraintLayout / Compose • Share code with existing implementation •

    Kotlin DSL to express constraints • JSON syntax to express constraints • Work in Progress : we want your feedback!
  24. 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' } }
  25. 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' } }
  26. 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