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
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.
3. Chaining 
 all at once? Does the order matter? Photo by Mae Mu on Unsplash
4. Beyond intuition 2 Borders, 1 Padding, 1 Size
5. Modi f 2 Borders, 1 Padding, 1 Size
6. Beyond intuition 2 Size Modi f iers
8. What would happen, when we use size and requiredSize modi f iers chained? Force Required Size?
9. The layout node is still f illing max size. 
 Also respecting the requiredSize of 50.dp. Force Required Size?
10. How to tackle this? Learn about constraints and the layout phase.
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
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.
13. Constraints are the min and max bounds for the size of a node. H W ( x , y ) De f inition
14. What kind of constraints 
 do we have?
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
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 - ∞
17. Exact constraints Layout node should have an exact size. The minimum and maximum bounds have the same size. 300 - 300 200 - 200
18. Combined constraints Bounding width, providing an unbounded maximum height. Exact width, providing a bounded height. 600 - 600 0 - 400 100 - 400 100 - ∞
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.
20. UI Tree SIZE CONSTRAINTS IMAGE ROTATE (90) SIZE (46) COLUMN PADDING (start = 16) BUTTON ROW PADDING (top = 16) BUTTON
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
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.
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
24. Padding - Background - Border Intuitive Sample
25. Padding - Background - Border
26. Beyond intuition Scale - O ff set
27. Sample Scale - O ff set
28. Beyond intuition Custom Modi f ier
29. Custom Modi f ier Custom Modi f ier + Clip Clip + Custom Modi f ier
30. Custom Modi f ier Custom Modi f ier + Clip Clip + Custom Modi f ier
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
32. Meike F. Hammer 
 @feliciaf_aye Chaining Compose modi f iers beyond intuition Android Lead @ adesso mobile solutions GmbH THANK YOU WE ARE HIRING