Stylianos Gakis
12/22/2021, 6:54 AMColumn {
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.20.dp
instead of 16.dp
a list with let’s say >5 items?
Do you remove the verticalArrangement
and add a spacer in-between all items manually?Filip Wiesner
12/22/2021, 8:54 AMSpacers
like you mentioned.
Tldr: 🅱️ but depends on the context 🙂Stylianos Gakis
12/22/2021, 9:02 AMJoseph Hawkes-Cates
12/22/2021, 6:21 PMChris Sinco [G]
12/22/2021, 7:14 PMColton Idle
12/22/2021, 7:42 PMChris Sinco [G]
12/22/2021, 9:58 PMweight
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.Stylianos Gakis
12/23/2021, 8:41 AMColumn {}
wrapping everything, you have the CircleView
then MoveAndHeartItems
then StepCalcStats
then HeartGraph
composables.
These in-between them have varying Spacings as it is right now as far as my eye can see (I don’t have a great “designer’s eye”).
Thing is this screen may have started with less features, and a common verticalArrangement
spacing may have sufficed, but then as soon as more of those composables were introduced, you’d have to drop that in favor of individual Spacings. Am I wrong to think of it this way? Please do help me understand your point if so, I’d really appreciate it.Chris Sinco [G]
12/23/2021, 9:20 PMspacedBy
modifier in containers where I expect some uniformity amongst the children elements. It's handy in the screenshot above for the overall Column of the screen, but I'd use it out of convenience, especially in the beginning as you mentioned. Over time, I may remove it and rely on padding within each child element because as the screen gets more complex and the children get more complex, they could have their own set of spacing built-in since they may be reused across your app. In that case, spacedBy
doesn't quite scale.Spacer
less often since I tend to have each component handle their own spacing, and/or rely on arrangement when brought together in a Column/Row. It might be because I have a designer brain and am used to tools that don't make adding arbitrary Spacers convenient so most choices are padding or arrangement. But Spacer is very handy when hacking quickly / debugging layout / finessing before cleaning up. Oh it's also very useful when you need to make padding/spacing percentage or ratio-based since we aren't able to do that with the Padding modifier just yet.Am I wrong to think of it this way?I personally don't think there's a wrong or right way to think about how to implement spacing. I think what is great about Compose is there is just enough variability in how to implement spacing that you can choose what works for you but not be overwhelmed with too much choice, e.g. CSS. One general rule I do have though in a world of variable spacing is at least for Android/Material apps, using multiples of
4.dp
is always handy to keep UI spacing harmonious across your layouts with minimal effort.Stylianos Gakis
12/25/2021, 6:35 AMspacedBy
.
The idea of the items themselves knowing about their own space has never worked for me still. Depending on different contexts these items are being used in, it’s always easier to reason about by adding the spacer itself. Either I’m interpreting the designs weirdly and I don’t quite get that spacing, or not sure 😅Colton Idle
08/26/2022, 10:22 PMChris Sinco [G]
08/26/2022, 10:26 PM