I have a code-style related question. How do you prefer to write your layouts A:

Column {
    Item()
    Spacer(Modifier.height(16.dp))
    OtherItem()
}

B:

Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
    Item()
    OtherItem()
}

I’d love to hear arguments/opinions too if someone feels like they have strong opinions about either way.

If it's one of many spacings that is bigger than others, than I would hack it some other way like adding padding to one of the items next to it. The problem is when the spacing is smaller than the common one or there is more than one different spacing. Than I would remove arrangement add

Spacers

like you mentioned. Tldr: 🅱️ but depends on the context 🙂

These are two points that really have been bothering me too. • Space is smaller problems: Literally impossible, have to fallback to spacings • Space is bigger problems: If we add a padding to a specific item as you said, it 1) Feels like a hack, since that item itself isn’t what needs a padding, so you add something to it that’s unrelated to it (adding it to its modifier alleviates this problem at least a bit) 2) It becomes an actual problem when things start being rearranged in the list (very common) and suddenly that item takes its padding with it to weird places in the list. With all these in mind, I really feel like even though I like 🅱️ more, and it seems like most people like it too, it starts becoming a problem in every slight change the Column/Row might see.

Another option when the space is smaller between two items in the column is to encapsulate those two items in another container (column, box, etc) and then set their spacing accordingly. This helps you avoid adding spacers between everything else.

Another option: push back on the designer about why their spacing choices are inconsistent 🤷‍♂️🏻

Have you ever tried speaking to a designer? :troll: 😂

Revisiting this thread, and jokes partially aside, as a designer, I would question my design choices about being super precise with spacing (20 vs 16) between items based on # of items, assuming the parent Column width is the screen width (albeit padding). Not sure if this is design is based on iOS but I’d push back and say hey Android screens have different widths, so it’s more scalable to use

weight

or

Arrangement.SpaceBetween

in this scenario. This would also ensure the children in the Column would all be the same size (assuming this is what you want), and have even spacing between them.

I think you got me wrong Chris. The spacing of the items isn’t supposed to change depending on the number of items on it, and the children’s height or width doesn’t change when this spacing changes. Actually I was referring to columns/rows that do not contain much of the same item, but are for example screens that contain a bunch of completely different items in them with potentially varying spacings between them. This has nothing to do with pixel perfectness, but more about giving things various spacings to give less/more emphasis maybe? Is that really something that I should push back on? I really don’t think so, this feels like a very natural use case.

Gotcha, indeed I misunderstood. Though I think the general answer of "it depends on context" still applies. In the screenshot you provided, yes I think you may end up having variability in the spacing across the entire screen just due to the size of elements (font size, height/width) which I believe is being used more to communicate hierarchy and emphasis than space. Space here is used more to communicate grouping of items together / container relationships.

Hey thanks for taking the time to write down all this advice, I do appreciate it!

Yeah. thats what i do basically. https://mxstbr.com/thoughts/margin/

Yeah always passing a modifier is a nice tool