https://kotlinlang.org logo
#compose
Title
# compose
c

Colton Idle

03/26/2023, 6:57 PM
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?
o

orangy

03/26/2023, 7:03 PM
If both images are same size, then button should be centered, no? Wrap column in a box and center-align both column and button
c

Colton Idle

03/26/2023, 7:08 PM
In reality, it'll look like this
t

Tolriq

03/26/2023, 7:12 PM
Easy version wrap in box and center
l

Landry Norris

03/26/2023, 7:12 PM
Can you wrap the column in a box, have the column fill the box, and add a button to the center of the box?
m

mgrazianodecastro

03/26/2023, 7:17 PM
either a box with a column + button, or use a custom layout
e

ephemient

03/27/2023, 6:04 AM
or put the button in the column between the two images, and use
Copy code
Modifier
    .align(Alignment.CenterHorizontally)
    .height(0.dp)
    .wrapContentHeight(unbounded = true)
    .zIndex(1f)
on it
🤯 1
💡 1
🆒 1
m

mgrazianodecastro

03/27/2023, 10:50 PM
like a jetpack compose king
c

Chris Sinco [G]

03/28/2023, 5:36 PM
ConstraintLayout is perfect for this since you can constrain the top and bottom of the button to the edges of either Image
c

Colton Idle

03/29/2023, 12:10 AM
agree. but never used CL yet in compose and didn't want to have to pull something new in.
l

Landry Norris

03/29/2023, 12:11 AM
Has ConstraintLayout been ported to multiplatform yet? Other mentioned solutions are multiplatform.
c

Chris Sinco [G]

03/29/2023, 12:20 AM
Not yet 😞
l

Landry Norris

03/29/2023, 2:39 AM
I see the word yet...
c

Chris Sinco [G]

03/29/2023, 4:06 AM
Yes no promises on when though
4 Views