Incorrect RectF On Canvas Created From Composable

Question

I'm trying to highlight a view by grabbing the layoutCoordinate from a Box using .onGloballyPositioned. I receive the following coordinates:

val viewLeft = layoutCoordinates.boundsInWindow().left
val viewTop = layoutCoordinates.boundsInWindow().top
val viewRight = layoutCoordinates.boundsInWindow().right
val viewBottom = layoutCoordinates.boundsInWindow().bottom

When I try to create a highlight with this code, it is always off by a bit:

canvas.drawRoundRect(
viewLeft,
viewTop,
viewRight,
viewBottom,
cornerRadius,
cornerRadius,
paint)

This is the result that I am getting:

Any idea what I may be doing incorrect? Thanks!

user_5457853 · Answer

layoutCoordinates.boundsInWindow() adds status bar height to coordinate. You should use layoutCoordinates.boundsInParent() to get a Composable coordinates relative to its parent's top left corner.

For instance this example

Column(modifier = Modifier.fillMaxSize()) {
    var text by remember { mutableStateOf("") }
    Spacer(modifier = Modifier.height(200.dp))
    Column(modifier = Modifier.background(Color.Green)) {
        Spacer(modifier = Modifier.height(100.dp))
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(100.dp)
                .background(Color.Red)
                .onGloballyPositioned { layoutCoordinates: LayoutCoordinates ->
                    text =
                        "In window: ${layoutCoordinates.boundsInWindow()}
" +
                                "in root: ${layoutCoordinates.boundsInRoot()}
" +
                                "in parent: ${layoutCoordinates.boundsInParent()}"
                }
        )
        Text(text)

    }
}

Red box is 100.dp below parent's top while parent is 200.dp below root's top position.

Incorrect RectF On Canvas Created From Composable

1 Answers