I'm trying to draw a red border, outside of draw a...

# compose

[Peter]

I'm trying to draw a red border, outside of draw area. I managed to do following, but I still have a weird gap between gray and red line. Any ideas how to fix this? I guess I would need to adjust corner size, but no idea how to do that, based on Shape . Source code in thread.

[Peter]

I have following. Let's forget about the use of composed for now 🙂

@Preview
@Composable
private fun Preview() {
    Surface(Modifier.background(Color.White)) {
        Box(
            Modifier
                .padding(10.dp)
                .size(100.dp)
                .border(
                    color = Color.Black,
                    width = 1.dp,
                    shape = MaterialTheme.shapes.large,
                )
                .composed {
                    val shape = MaterialTheme.shapes.large
                    offset((-1.5).dp, (-1.5).dp)
                        .drawBehind {
                            val border = 3.dp.toPx()

                            drawOutline(
                                shape.createOutline(
                                    Size(size.width + border, size.height + border),
                                    layoutDirection,
                                    this
                                ),
                                color = Color.Red,
                                style = Stroke(width = border),
                            )
                        }
                }
        )
    }
}

[Peter]

I managed to do the following. Any better solutions?

.composed {
                    val shape = MaterialTheme.shapes.large
                    offset((-1.5).dp, (-1.5).dp)
                        .drawBehind {
                            val border = 3.dp.toPx()
                            val halfBorder = border / 2
                            val size = Size(size.width, size.height)

                            val outerShape = RoundedCornerShape(
                                topStart = CornerSize(shape.topStart.toPx(size, density) + halfBorder),
                                topEnd = CornerSize(shape.topEnd.toPx(size, density) + halfBorder),
                                bottomEnd = CornerSize(shape.bottomEnd.toPx(size, density) + halfBorder),
                                bottomStart = CornerSize(shape.bottomStart.toPx(size, density) + halfBorder),
                            )

                            drawOutline(
                                outerShape.createOutline(
                                    Size(size.width + border, size.height + border),
                                    layoutDirection,
                                    this
                                ),
                                color = Color.Red,
                                style = Stroke(width = border),
                            )
                        }
                }

[Jeff Lockhart]

This might help: https://cloudfour.com/thinks/the-math-behind-nesting-rounded-corners/

[xoangon]

Such an awesome post, straight to bookmarks. Thanks @Jeff Lockhart !