Chaining Composemodifiers beyond intuitionMeike Felicia Hammer@feliciaf_ayeAndroid Lead @ adesso mobile solutions GmbH
View Slide
Modifiers• size, layout, behaviour, appearance• additional information• user input• clickable, scrollable, draggable, zoomableDecorate and augment composables. Moulding them the way you need them.
Chaining all at once?Does the ordermatter?Photo by Mae Mu on Unsplash
Beyond intuition2 Borders, 1 Padding, 1 Size
Modif2 Borders, 1 Padding, 1 Size
Beyondintuition2 Size Modifiers
What wouldhappen, whenwe use sizeandrequiredSizemodifierschained?Force Required Size?
The layout node is stillfilling max size. Also respecting therequiredSize of 50.dp.Force Required Size?
How to tackle this?Learn about constraints and thelayout phase.
Compose PhasesCompositionWhat to showLayoutWhere to place itDrawingHow to render itData Composition Drawing UILayoutsizerequiredSizepaddingfillMaxSizesizeInwrapContentSizeclipdrawBehindrotatescale
Layout phase3 steps to remember• Measure children• Decide own size• Place childrenConstraints helpfinding theright size in thefirst two steps.
Constraints are the minand max bounds for the sizeof a node.HW( x , y )Definition
What kind of constraints do we have?
Bounded constraintsLayout node has to choose a widthbetween 100 and 400 and a heightbetween 100 and 400.100 - 400100 - 400
Unbounded constraintsThe node is not constraint to any size.The maximum width and heightbounds are set to infinity.0 - ∞0 - ∞
Exact constraintsLayout node should have an exact size.The minimum and maximum boundshave the same size.300 - 300200 - 200
Combined constraintsBoundingwidth,providing anunboundedmaximumheight.Exact width, providing abounded height.600 - 6000 - 400100 - 400100 - ∞
Constraints in ActionConstraints 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 ownsize, it communicates it’s size backup to the tree.
UI TreeSIZECONSTRAINTSIMAGEROTATE (90)SIZE (46)COLUMNPADDING(start = 16)BUTTONROWPADDING(top = 16)BUTTON
600300IMAGEROTATE (90)SIZE (100)COLUMNPADDING(start = 16)BUTTON Text: 119*82ROWPADDING(top = 16)BUTTON Text: 140*82Traversingw: 0 - 600h: 0 - 300w: 0 - 600h: 0 - 300w: 0 - 584h: 0 - 300BUTTONw: 0 - 584h: 0 - 202BTNw: 0 - 444h: 0 - 300W: 256, H: 180<— Max —><— SUM —>w: 256h: 180w: 0 - 584h: 0 - 300w: 140h: 98w: 119h: 82w: 140h: 180w: 100h: 100w: 156h: 180
Too bigOut of rangeIMAGESIZE(600)IMAGESIZE(80)Too smallw: 100 - 200 h: 100 - 500w: 100 - 200 h: 100 - 500w: 200 - 200 h: 500 - 500Adapting as closely as it can.w: 100 - 100 h: 100 - 100Respecting the incoming bounds.
Constraints affect thesize of composables.Modifiers affectconstraints.What is the relation betweenconstraints and modifiers?Constraint vs Modifier
Padding - Background - BorderIntuitive Sample
Padding - Background - Border
Beyond intuitionScale - Offset
SampleScale - Offset
Beyond intuitionCustom Modifier
Custom Modifier Custom Modifier + ClipClip + Custom Modifier
Influencing size, shape and behaviour of composables• Usually read top to bottom• Counter-intuitive regarding some cases• Some modifiers are ineffective applied multiple timesORDER MATTERS
Meike F. Hammer @feliciaf_ayeChaining Composemodifiers beyond intuitionAndroid Lead @ adesso mobile solutions GmbHTHANKYOUWE ARE HIRING