What is an easy way to do absolute positioning of a Box inside a Box? I tried Modifier.offset() and...

# compose

[Stefan Oltmann]

What is an easy way to do absolute positioning of a Box inside a Box?

I tried Modifier.offset() and Modifier.graphicsLayer(), but both won't work as they don't have an effect.

I want to make the Boxes clickable, so drawing in a Canvas won't help me.

Box {
Box(
    modifier = Modifier
        .border(1.dp, Color.Blue)
        .size(
            width = 200.dp,
            height = 200.dp
        )
        .graphicsLayer(
            translationX = 50,
            translationY = 50
        )
)
}

[Stefan Oltmann]

Use case is face overlays in my photo app.

This Canvas draws Rectangles over detected faces.
But I wan't them to be clickable and also have a hover effect.
AFAIK I will need real Boxes for that.

Canvas(
    modifier = Modifier
) {

    for (face in faces) {

        drawRect(
            color = Color.Red,
            topLeft = Offset(
                x = it.size.width * face.xPos.toFloat(),
                y = it.size.height * face.yPos.toFloat()
            ),
            size = Size(
                width = it.size.width * face.width.toFloat(),
                height = it.size.height * face.height.toFloat()
            ),
            style = Stroke()
        )
    }
}

[romainguy]

You don’t need real boxes for this, you could have your own pointer input handler to do this. But it’s easier with Box .

[Stefan Oltmann]

Yes, to make them clickable I could look into which face the click went.

[Stefan Oltmann]

Do I have to make a custom Layout or is there something I just overlook how to have absolute positioned boxes?

[romainguy]

I’m sure there’s a way (I’m surprised graphicsLayer() didn’t work, although I would recommend against it for this use case)

[romainguy]

And you don’t need a custom layout, Canvas + pointerInput modifier is all you need really.

[romainguy]

I’m also surprised offset() doesn’t work, but maybe that’s a Box specific thing (I’ve used it in Column)

[Stefan Oltmann]

I don't understand that, too

[Dan MacNeil]

In the first code example if you move the graphicsLayer or offset to be the first modifier then the position will move. I only tested this on Android platform.

[Stefan Oltmann]

Oh 😲

[Stefan Oltmann]

That's real magic.