Chaining Compose modi iers beyond intuition Meike Felicia Hammer @feliciaf_aye Android Lead @ adesso mobile solutions GmbH 

Modi iers • size, layout, behaviour, appearance • additional information • user input • clickable, scrollable, draggable, zoomable Decorate and augment composables. Moulding them the way you need them. 

Chaining all at once? Does the order matter? Photo by Mae Mu on Unsplash 

Beyond intuition 2 Borders, 1 Padding, 1 Size 

Modi iers 2 Borders, 1 Padding, 1 Size 

Beyond intuition 2 Size Modi iers 

No content

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

The layout node is still illing max size. Also respecting the requiredSize of 50.dp. Force Required Size? 

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

Compose Phases Composition What to show Layout Where to place it Drawing How to render it Data Composition Drawing UI Layout size requiredSize padding illMaxSize sizeIn wrapContentSize clip drawBehind rotate scale 

Layout phase 3 steps to remember • Measure children • Decide own size • Place children Constraints help inding the right size in the irst two steps. 

Constraints are the min and max bounds for the size of a node. H W ( x , y ) De inition 

What kind of constraints do we have? 

Bounded constraints Layout node has to choose a width between 100 and 400 and a height between 100 and 400. 100 - 400 100 - 400 

Unbounded constraints The node is not constraint to any size. The maximum width and height bounds are set to in inity. 0 - ∞ 0 - ∞ 

Exact constraints Layout node should have an exact size. The minimum and maximum bounds have the same size. 300 - 300 200 - 200 

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

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. 

UI Tree SIZE CONSTRAINTS IMAGE ROTATE (90) SIZE (46) COLUMN PADDING (start = 16) BUTTON ROW PADDING (top = 16) BUTTON 

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 

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. 

Constraints affect the size of composables. Modi iers affect constraints. What is the relation between constraints and modi iers? Constraint vs Modi ier 

Padding - Background - Border Intuitive Sample 

Padding - Background - Border 

Beyond intuition Scale - Offset 

Sample Scale - Offset Scaled and then moved to the right. Moves to the right before scaling. 

Sample Scale - Offset 

Beyond intuition Custom Modi ier 

Custom Modi ier Custom Modi ier + Clip Clip + Custom Modi ier 

Custom Modi ier Custom Modi ier + Clip Clip + Custom Modi ier 

In luencing size, shape and behaviour of composables • Usually read top to bottom • Counter-intuitive regarding some cases • Some modi iers are ineffective applied multiple times ORDER MATTERS 

Meike F. Hammer @feliciaf_aye Chaining Compose modi iers beyond intuition Android Lead @ adesso mobile solutions GmbH THANK YOU WE ARE HIRING