Droidcon Lisbon 2023: Chaining Compose Modifiers beyond intuition

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