$30 off During Our Annual Pro Sale. View Details »

Droidcon Lisbon 2023: Chaining Compose Modifiers beyond intuition

Droidcon Lisbon 2023: Chaining Compose Modifiers beyond intuition

Meike Felicia Hammer

October 03, 2023
Tweet

More Decks by Meike Felicia Hammer

Other Decks in Programming

Transcript

  1. Chaining Compose
    modi
    f
    iers beyond intuition
    Meike Felicia Hammer


    @feliciaf_aye
    Android Lead @ adesso mobile solutions GmbH

    View Slide

  2. Modi
    f
    iers
    • size, layout, behaviour, appearance


    • additional information


    • user input


    • clickable, scrollable, draggable, zoomable
    Decorate and augment composables.

    Moulding them the way you need them.

    View Slide

  3. Chaining

    all at once?
    Does the order


    matter?
    Photo by Mae Mu on Unsplash

    View Slide

  4. Beyond intuition
    2 Borders, 1 Padding, 1 Size

    View Slide

  5. Modi
    f
    2 Borders, 1 Padding, 1 Size

    View Slide

  6. Beyond


    intuition
    2 Size Modi
    f
    iers

    View Slide

  7. View Slide

  8. What would
    happen, when
    we use size
    and
    requiredSize
    modi
    f
    iers
    chained?
    Force Required Size?

    View Slide

  9. The layout node is still
    f
    illing max size.

    Also respecting the
    requiredSize of 50.dp.
    Force Required Size?

    View Slide

  10. How to tackle this?
    Learn about constraints and the
    layout phase.

    View Slide

  11. Compose Phases
    Composition


    What to show




    Layout


    Where to place it


    Drawing


    How to render it
    Data Composition Drawing UI
    Layout
    size
    requiredSize
    padding
    f
    illMaxSize
    sizeIn
    wrapContentSize
    clip
    drawBehind
    rotate
    scale

    View Slide

  12. Layout phase
    3 steps to remember
    • Measure children


    • Decide own size


    • Place children


    Constraints help
    f
    inding the


    right size in the
    f
    irst two steps.

    View Slide

  13. Constraints are the min


    and max bounds for the size


    of a node.
    H
    W
    ( x , y )
    De
    f
    inition

    View Slide

  14. What kind of constraints

    do we have?

    View Slide

  15. Bounded constraints
    Layout node has to choose a width


    between 100 and 400 and a height


    between 100 and 400.
    100 - 400
    100 - 400

    View Slide

  16. Unbounded constraints
    The node is not constraint to any size.


    The maximum width and height


    bounds are set to in
    f
    inity.
    0 - ∞
    0 - ∞

    View Slide

  17. Exact constraints
    Layout node should have an exact size.


    The minimum and maximum bounds


    have the same size.
    300 - 300
    200 - 200

    View Slide

  18. Combined constraints
    Bounding
    width,
    providing an
    unbounded
    maximum
    height.
    Exact width, providing a
    bounded height.
    600 - 600
    0 - 400
    100 - 400
    100 - ∞

    View Slide

  19. Constraints in Action
    Constraints are passed down

    from parent to child in

    the UI Tree

    during the layout phase.
    Parent measures it’s child.


    When a node has measured its own
    size, it communicates it’s size back
    up to the tree.

    View Slide

  20. UI Tree
    SIZE
    CONSTRAINTS
    IMAGE
    ROTATE (90)
    SIZE (46)
    COLUMN
    PADDING


    (start = 16)
    BUTTON
    ROW
    PADDING


    (top = 16)
    BUTTON

    View Slide

  21. 600
    300
    IMAGE
    ROTATE (90)
    SIZE (100)
    COLUMN
    PADDING


    (start = 16)
    BUTTON

    Text: 119*82
    ROW
    PADDING


    (top = 16)
    BUTTON

    Text: 140*82
    Traversing
    w: 0 - 600


    h: 0 - 300
    w: 0 - 600


    h: 0 - 300
    w: 0 - 584


    h: 0 - 300
    BUTTON
    w: 0 - 584


    h: 0 - 202
    BTN
    w: 0 - 444


    h: 0 - 300
    W: 256, H: 180
    <— Max —>
    <— SUM —>
    w: 256


    h: 180
    w: 0 - 584


    h: 0 - 300
    w: 140


    h: 98
    w: 119


    h: 82
    w: 140


    h: 180
    w: 100


    h: 100
    w: 156


    h: 180

    View Slide

  22. Too big
    Out of range
    IMAGE
    SIZE


    (600)
    IMAGE
    SIZE


    (80)
    Too small
    w: 100 - 200

    h: 100 - 500
    w: 100 - 200

    h: 100 - 500
    w: 200 - 200

    h: 500 - 500
    Adapting as closely as it can.
    w: 100 - 100

    h: 100 - 100
    Respecting the incoming bounds.

    View Slide

  23. Constraints affect the
    size of composables.


    Modi
    f
    iers affect
    constraints.
    What is the relation between
    constraints and modi
    f
    iers?
    Constraint vs Modi
    f
    ier

    View Slide

  24. Padding - Background - Border
    Intuitive Sample

    View Slide

  25. Padding - Background - Border

    View Slide

  26. Beyond intuition
    Scale - O
    ff
    set

    View Slide

  27. Sample
    Scale - O
    ff
    set

    View Slide

  28. Beyond intuition
    Custom Modi
    f
    ier

    View Slide

  29. Custom Modi
    f
    ier Custom Modi
    f
    ier + Clip
    Clip + Custom Modi
    f
    ier

    View Slide

  30. Custom Modi
    f
    ier Custom Modi
    f
    ier + Clip
    Clip + Custom Modi
    f
    ier

    View Slide

  31. In
    f
    luencing size, shape and behaviour of composables
    • Usually read top to bottom


    • Counter-intuitive regarding some cases


    • Some modi
    f
    iers are ineffective applied multiple times
    ORDER MATTERS

    View Slide

  32. Meike F. Hammer

    @feliciaf_aye
    Chaining Compose
    modi
    f
    iers beyond intuition
    Android Lead @ adesso mobile solutions GmbH
    THANK


    YOU
    WE ARE HIRING

    View Slide