I need a `Column` where the two components overlap...

# compose

[Lukasz Kalnik]

I need a Column where the two components overlap a bit. When I use offset on the second component, the Column size doesn't wrap the children's height anymore. Is it possible to fix it?

[Filip Wiesner]

If you are trying to position only two components, just write a custom layout. It's pretty easy to do

[Lukasz Kalnik]

Currently I'm using a ConstraintLayout (instead of a Column). I wonder if the custom layout is more code/more complex code.

[Filip Wiesner]

If it's just positioning two elements, it's really easy and not complex at all. You just measure the elements, decide what the resulting layout size (width & height) is and just place them.
Check out the docs.

[Filip Wiesner]

Constraint layout seems overkill for just placing two things IMO

[Lukasz Kalnik]

Thank you for the hint, I will try that!

[Lukasz Kalnik]

BTW out of interest: why is Constraint layout an overkill? Is it more expensive computationally?

[Filip Wiesner]

I remember when Compose was in alpha/beta, and I've seen a few people discouraging the use of Constraint Layout because it's usually not needed in Compose. There is also this quote in the docs:

In the View system, ConstraintLayout was the recommended way to create large and complex layouts, as a flat view hierarchy was better for performance than nested views are. However, this is not a concern in Compose, which is able to efficiently handle deep layout hierarchies.

I don't have any specific argument for why that is; I just always thought that and actually never used it. It's possible that the Google devs didn't want people to default to using Constraint Layout just because that's what they used in the View system. I'm not sure; it just feels more expensive to me, but I don't have any proof or argument against it, if that makes sense. 😅

[Lukasz Kalnik]

OK, perfect. That was also my impression. Because the ConstraintLayout I'm using is not really complicated, so I think I prefer to stick to something "ready" instead of implementing custom layout.

[Lukasz Kalnik]

Thanks for your help and comprehensive explanation!

[Albert Chang]

In compose, constraint layout is the only layout that can measure its children multiple times, so while I don't have any measurement result I think generally it can't be more efficient than regular layouts.

[Stylianos Gakis]

Does this work for your use case?

Column {
 Whatever()
 Whatever()
 Column(verticalArrangement = Arrangement.spacedBy(-8.dp)) {
  FirstOverlappingThing()
  SecondOverlappingThing()
 }
 Whatever()
}

[Lukasz Kalnik]

Yes, that works! Thank you 🙂

[Filip Wiesner]

Damn, I always forget that Arrangement exists 😅 I just use spacers everywhere

[Stylianos Gakis]

Arrangement is amazing, especially in scenarios where you can avoid having to think of all the possible scenarios when your column has conditional composables.
So doing smth like this

Column(arrangement..) {
 FirstItem()
 if (someCondition) {
  SecondItem()
 }
 ThirdItem()
}

Instead of this:

Column(arrangement..) {
 if (someCondition) {
  FirstItem()
 }
 if (someCondition2) {
  SecondItem()
 }
 if (someCondition3) {
  ThirdItem()
 }
}

where you need to do a bunch of if checks left and right to see which permutation of the 3 conditions is true to know when to put or not put a spacer so that you don't add double spaces, or no spaces in the right spots

[Lukasz Kalnik]

I wish there was also something like dividedBy for dividers.