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. Advanced Design Pa
    tt
    erns with
    ConstraintLayout 2.1
    John Hoford


    @johnhoford
    Nicolas Roard


    @camaelon

    View Slide

  2. Overview

    View Slide

  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

    View Slide

  4. ConstraintLayout 2.0
    • Virtual Layouts

    • Helpers & Decorators

    • Programming APIs

    • MotionLayout
    • Motion Editor

    View Slide

  5. ConstraintLayout 2.1
    • Scalability

    • View Transitions

    • Rotation

    • Motion Helpers

    • Foldable Support

    View Slide

  6. ConstraintLayout 1.0

    View Slide

  7. ConstraintLayout 1.0
    Compose

    View Slide

  8. ConstraintLayout 1.0
    • Kotlin DSL for constraints

    • ConstraintSet support

    • JSON support

    • MotionLayout light
    Compose

    View Slide

  9. 2.1

    View Slide

  10. Scalability

    MotionScene
    fi
    les are getting large!

    View Slide

  11. Scalability
    • Includes - Support separate ConstraintSet
    fi
    les

    • ConstraintOverlay - compact way of modifying derived constraints

    • ViewTransitions - Dynamic mutation of state

    View Slide


  12. • ConstraintSet can now be in separate
    fi
    les

    • Referenced through includes



    motion:constraintSet="@xml/alternate" /
    >

    • Or directly in Transitions



    motion:constraintSetEnd="@xml/main_scene
    "

    View Slide


  13. • Only need to specify the id and the attributes to change

    >

    >

    >

    >

    >

    >

    >

    >

    >

    >

    View Slide


  14. • Operates on one or more views

    • Can modify the current state

    n

    android:id=“@+id/remove
    "

    motion:motionTarget="@+id/textView2
    "

    motion:viewTransitionMode="currentState
    "

    motion:duration="1000">
    >


    n

    android:id=“@+id/restore
    "

    motion:motionTarget="@+id/textView2
    "

    motion:viewTransitionMode="currentState
    "

    motion:duration="1000">
    >


    View Slide


  15. • Operates on one or more views

    • Can modify all ConstraintSets

    n

    android:id=“@+id/remove
    "

    motion:motionTarget="@+id/textView2
    "

    motion:viewTransitionMode="allStates
    "

    motion:duration="1000"
    >

    >


    n

    android:id=“@+id/restore
    "

    motion:motionTarget="@+id/textView2
    "

    motion:viewTransitionMode="allStates
    "

    motion:duration="1000"
    >

    >


    View Slide


  16. • Can modify all noState These can run asynchronous

    n

    android:id="@+id/spin
    "

    motion:motionTarget="button.*
    "

    motion:viewTransitionMode="noState
    "

    motion:onStateTransition="actionDownUp
    "

    motion:upDuration = "700
    "

    motion:duration="200"
    >

    >

    >

    e

    motion:attributeName="roundPercent
    "

    motion:customFloatValue=".3" /
    >

    e

    motion:attributeName="background
    "

    motion:customColorDrawableValue="#AE7088" /
    >

    >

    >

    >

    View Slide


  17. • Can modify all noState These can run asynchronous

    n

    android:id="@+id/spin
    "

    motion:motionTarget="button.*
    "

    motion:viewTransitionMode="noState
    "

    motion:onStateTransition="actionDownUp
    "

    motion:upDuration = "700
    "

    motion:duration="200"
    >

    >

    >

    e

    motion:attributeName="roundPercent
    "

    motion:customFloatValue=".3" /
    >

    e

    motion:attributeName="background
    "

    motion:customColorDrawableValue="#AE7088" /
    >

    >

    >

    >

    View Slide

  18. Rotation

    View Slide

  19. Rotation


    ConstraintLayout Relative Position
    45°
    80dp
    30dp
    135°
    app:layout_constraintCircleRadius ="80dp"
    app:layout_constraintCircleAngle. ="45"
    app:layout_constraintCircle. =“@id/sun”
    /
    >

    app:layout_constraintCircleRadius ="30dp"
    app:layout_constraintCircleAngle. ="135"
    app:layout_constraintCircle. =“@id/sun”
    /
    >

    View Slide

  20. Rotation


    ConstraintLayout Relative Position
    • Changing values in motion Layout

    View Slide

  21. Rotation


    ConstraintLayout Relative Position
    • Changing values in motion Layout

    View Slide

  22. Rotation


    Polar Mode
    >



    motion:animateRelativeTo="@+id/earth" /
    >

    >

    >



    motion:animateRelativeTo=“@+id/sun” /
    >

    >

    View Slide

  23. Rotation


    Polar Mode
    >



    motion:animateRelativeTo="@+id/earth" /
    >

    >

    >



    motion:animateRelativeTo=“@+id/sun” /
    >

    >

    View Slide

  24. Rotation


    Polar Mode
    • Setting layout_constraintCircleAngle

    is understood by the polar mode 

    app:layout_constraintCircleAngle. ="360"

    View Slide

  25. Rotation


    Polar Mode
    • Setting layout_constraintCircleAngle

    is understood by the polar mode 

    app:layout_constraintCircleAngle. ="360"

    View Slide

  26. Rotation


    Polar Mode
    • They chain 

    moon relative to earth

    earth relative to sun

    View Slide

  27. Rotation


    Polar Mode
    • They chain 

    moon relative to earth

    earth relative to sun

    View Slide

  28. Rotation Polar Mode


    KeyPosition In Polar mode
    • KeyPosition works in polar

    percentX is radial change

    percentY is in Angular change

    View Slide

  29. Rotation Polar Mode


    KeyPosition In Polar mode
    • KeyPosition works in polar

    percentX is radial change

    percentY is in Angular change

    View Slide

  30. Rotation Polar Mode


    KeyPosition In Polar mode
    • Rocket maintains orbit

    Then moves out to the moon

    View Slide

  31. Rotation Polar Mode


    KeyPosition In Polar mode
    • Rocket maintains orbit

    Then moves out to the moon

    View Slide

  32. • KeyPosition 

    percentX maintains radial distance

    percentY locks the rotation %
    Rotation Polar Mode


    KeyPosition In Polar mode

    View Slide

  33. • KeyPosition 

    percentX maintains radial distance

    percentY locks the rotation %
    Rotation Polar Mode


    KeyPosition In Polar mode

    View Slide

  34. • OnSwipe now support rotation via:

    dragDirection , anchorTarget, rotationCenterId

    • Transform Pivot target can be center of a view
    Rotation OnSwipe


    Rotational support
    e

    motion:dragDirection="dragClockwise"
    motion:rotationCenterId="@+id/earth"
    /
    >

    >



    android:rotation="0"
    motion:transformPivotTarget=“@+id/earth
    "

    /
    >


    View Slide

  35. • OnSwipe now support rotation via:

    dragDirection , anchorTarget, rotationCenterId

    • Transform Pivot target can be center of a view
    Rotation OnSwipe


    Rotational support
    e

    motion:dragDirection="dragClockwise"
    motion:rotationCenterId="@+id/earth"
    /
    >

    >



    android:rotation="0"
    motion:transformPivotTarget=“@+id/earth
    "

    /
    >


    View Slide

  36. Miscellaneous

    View Slide

  37. Quantized Motion
    >

    n

    motion:quantizeMotionSteps="12"
    motion:quantizeMotionInterpolator="bounce"
    /
    >

    >

    View Slide

  38. Quantized Motion
    >

    n

    motion:quantizeMotionSteps="12"
    motion:quantizeMotionInterpolator="bounce"
    /
    >

    >

    View Slide

  39. Animated Text
    MotionLabel

    View Slide

  40. Animated Text
    MotionLabel

    View Slide


  41. Springs!

    View Slide


  42. Springs!

    View Slide

  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

    View Slide

  44. Motion Helpers

    View Slide

  45. MotionE
    ff
    ect

    View Slide

  46. MotionE
    ff
    ect

    View Slide

  47. MotionE
    ff
    ect

    View Slide

  48. MotionE
    ff
    ect

    View Slide

  49. MotionE
    ff
    ect


    +


    ViewTransition

    View Slide

  50. MotionE
    ff
    ect


    +


    ViewTransition

    View Slide

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

    View Slide

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

    View Slide

  53. Foldable support

    View Slide

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

    View Slide

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

    View Slide

  56. Compose

    View Slide

  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!

    View Slide

  58. View Slide

  59. View Slide

  60. View Slide

  61. View Slide

  62. View Slide

  63. View Slide

  64. View Slide

  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'
    }
    }

    View Slide

  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'
    }
    }

    View Slide

  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

    View Slide

  68. Link

    View Slide

  69. View Slide

  70. View Slide

  71. Where we are now

    View Slide

  72. ConstraintLayout


    2.1.0-rc01
    dependencies
    {

    implementation ‘androidx.constraintlayout:constraintlayout:2.1.0-rc01


    }

    h
    tt
    ps://github.com/AndroidX/constraintlayout

    View Slide

  73. ConstraintLayout Compose


    1.0.0-beta01
    dependencies
    {

    implementation ‘androidx.constraintlayout:constraintlayout-compose:1.0.0-beta01


    }

    h
    tt
    ps://github.com/AndroidX/constraintlayout

    View Slide

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

    View Slide

  75. Thanks!
    John Hoford


    @johnhoford
    Nicolas Roard


    @camaelon

    View Slide