If I have a Column { Full width 16/9 Image Full width 16/9 Image } but now my designer wants a but...

# compose

[Colton Idle]

If I have a

Column {
Full width 16/9 Image
Full width 16/9 Image
}

but now my designer wants a button that overlaps the both of those. What's the easiest way to make sure it's perfectly centered? I know I can use an offset, but then wouldn't i need to calculate buttons height and set offset to half of that?

[orangy]

If both images are same size, then button should be centered, no? Wrap column in a box and center-align both column and button

[Colton Idle]

In reality, it'll look like this

[Tolriq]

Easy version wrap in box and center

[Landry Norris]

Can you wrap the column in a box, have the column fill the box, and add a button to the center of the box?

[mgrazianodecastro]

either a box with a column + button, or use a custom layout

[ephemient]

or put the button in the column between the two images, and use

Modifier
    .align(Alignment.CenterHorizontally)
    .height(0.dp)
    .wrapContentHeight(unbounded = true)
    .zIndex(1f)

on it

[mgrazianodecastro]

like a jetpack compose king

[Chris Sinco [G]]

ConstraintLayout is perfect for this since you can constrain the top and bottom of the button to the edges of either Image

[Colton Idle]

agree. but never used CL yet in compose and didn't want to have to pull something new in.

[Landry Norris]

Has ConstraintLayout been ported to multiplatform yet? Other mentioned solutions are multiplatform.

[Chris Sinco [G]]

Not yet 😞

[Landry Norris]

I see the word yet...

[Chris Sinco [G]]

Yes no promises on when though