Why is setting size on a box first and then padding, different from setting padding first and then s...

# compose

[bryankeltonadams]

Why is setting size on a box first and then padding, different from setting padding first and then size?

Is there good documentation on it, or a rule of thumb as to not get confused?

[bryankeltonadams]

maybe it's in this document somewhere and I just haven't spotted where it's mentioned?

https://developer.android.com/jetpack/compose/modifiers#padding-and-size

[ephemient]

https://developer.android.com/jetpack/compose/modifiers#order-modifier-matters

[bryankeltonadams]

@ephemient thanks 🙂

[Pablichjenkov]

When you make a drawing do the order of hand traces and applying color matters? Is the same analogy. I believe if you apply a padding and then size, size will override the padding, in the opposite order doesn't override.

[ephemient]

it is not an override

[Pablichjenkov]

My intuition failed then

[ephemient]

Modifier.padding(5.dp).size(20.dp)
// <pad>                  <pad>
//      <------size------>
//      .....content......
Modifier.size(30.dp).padding(5.dp)
// <-----------size----------->
// <pad>                  <pad>
//      .....content......

[Pablichjenkov]

Got you, for a moment I thought applying padding without a size applied first would be ignored but the thing is Composables always have some size associated, intrinsic size. So adding a padding without size will add size to it right.
Afk but I will check just adding padding and border to see what happens. Would the border still be paint?

[ephemient]

border doesn't affect measurement/layout, it draws inside the content

[Pablichjenkov]

So it will paint a dot • ?

[Pablichjenkov]

Or a square with red borders? If just adding padding to a box for instance

[ephemient]

I think you don't understand. it works like CSS border: draws inside the content, no added padding

[ephemient]

Text(text = "hi", modifier = Modifier.border(1.dp, Color.Red)) without any other sizing constraints will draw a red border overlapping the edge of the text
Text(text = "hi", modifier = Modifier.border(1.dp, Color.Red).padding(1.dp)) will draw a red border in the 1dp added around the outside of the text

[Pablichjenkov]

I see, so padding actually increases the overall size of the layout.

[Stylianos Gakis]

Well again, it depends. As seen just a few messages back https://kotlinlang.slack.com/archives/CJLTWPH7S/p1686865440646269?thread_ts=1686861977.431699&cid=CJLTWPH7S it can increase the total size taken, if there's nothing before it specifying how big it should be already, or it might not change the total size but shrink the size for the child content, when it's after a modifier which sets the size to a specific value.

[Pablichjenkov]

Thanks Stylianos, that is the key. The bahavior will depend on if the size is set to be fixed/fillMax in which case will shrink inside available space or wrap content which will make the box grow. Default in box seems to be wrap content