I was trying to recreate one of SwiftUI tutorial U...

# compose

[Stylianos Gakis]

I was trying to recreate one of SwiftUI tutorial UIs for practice in Compose and I would like to get some feedback on how this could be done easier, more in the thread 🧵

[Stylianos Gakis]

To get the circle appear halfway over the map they are using hardcoded values, which doesn’t sound too fun anyway. The final SwiftUI looks like this:

[Stylianos Gakis]

My implementation in Compose for that part looks like this, I went down to the low-level Layout composable since I could not tell of another way to be able to measure the image and then use the measurement to know how to offset it from the (fake here) map.

@Composable
fun MapAndIcon(
    modifier: Modifier = Modifier,
    map: @Composable () -> Unit,
    icon: @Composable () -> Unit,
) {
    Layout(
        modifier = modifier,
        content = {
            map()
            icon()
        }
    ) { measurables: List<Measurable>, constraints: Constraints ->
        val mapPlaceable = measurables[0].measure(constraints)
        val iconPlaceable = measurables[1].measure(constraints)

        layout(
            width = constraints.maxWidth,
            height = mapPlaceable.height + (iconPlaceable.height / 2)
        ) {
            mapPlaceable.placeRelative(x = 0, y = 0)
            iconPlaceable.placeRelative(
                x = (constraints.maxWidth / 2) - (iconPlaceable.width / 2),
                y = (mapPlaceable.height) - (iconPlaceable.height / 2),
            )
        }
    }
}

This looks quite involved and feels like there might be a better approach?
And if not, I am not entirely happy with using measurables[x] to access my two composables, is there a better approach to that too?

[Stylianos Gakis]

I am getting (correctly) this as a result which I am happy about, but I am sure there are some mistakes done here and I’d love to hear any input

[Nabeel]

If you can use ConstraintLayout then its easy
Just use constraints of image like
topToBottomOf map layout bottomToBottomOf map layout

[Stylianos Gakis]

Ah right, I completely forgot we have access to constraint layout in compose 😅 I guess that would be the best way then right? I really can't think of some other way.