How do you folks draw Rectangle stroke border without fill? it looks like when i try to draw 3 recta...

# compose

[camkadev]

How do you folks draw Rectangle stroke border without fill? it looks like when i try to draw 3 rectangle borders one of them hide somehow

[camkadev]

@Composable
fun DrawBorder(color: Color, strokeWidth: Float) {
    val paint =  Paint()
    paint.strokeWidth = strokeWidth
    paint.color = color
    Draw { canvas: Canvas, parentSize: PxSize ->
        canvas.drawLine(Offset.zero, Offset(parentSize.width.value, 0f), paint)
        canvas.drawLine(
            Offset(parentSize.width.value - strokeWidth, 0f),
            Offset(parentSize.width.value - strokeWidth, parentSize.height.value),
            paint
        )
        canvas.drawLine(
            Offset(parentSize.width.value, parentSize.height.value - strokeWidth),
            Offset(0f, parentSize.height.value - strokeWidth),
            paint
        )
        canvas.drawLine(
            Offset(0f, parentSize.height.value),
            Offset.zero,
            paint
        )
    }
}

[camkadev]

@Preview
@Composable
fun MainPreview() {
    MaterialTheme {
        val fieldSize = 100
        Container(width = fieldSize.dp, height = fieldSize.dp) {
            DrawBorder(Color.Red, 1f)
            Align(alignment = Alignment.CenterLeft) {
                Container(width = (fieldSize / 4).dp, height = (fieldSize / 2).dp) {
                    DrawBorder(Color.Green, 1f)
                }
            }
            // this one does not draw
            Align(alignment = Alignment.CenterLeft) {
                Container(width = (fieldSize / 6).dp, height = (fieldSize / 4).dp ) {
                    DrawBorder(Color.Yellow, 1f)
                }
            }
        }
    }
}

[Yann Badoual]

I use DrawShape with a RectangleShape or RoundedCornerShape and this custom Brush:

class StrokeColor(
    val color: Color,
    val strokeWidth: Px
) : Brush {
    override fun applyTo(p: Paint) {
        p.style = PaintingStyle.stroke
        p.color = color
        p.strokeWidth = strokeWidth.value
    }
}

[Yann Badoual]

I think we can expect this kind of brush to be included in the library at some point. Or maybe there's a better way of doing it

[camkadev]

@Yann Badoual source rewrited to your solution, Yellow shape does not draw anyway

val fieldSize = 100
        Container(width = fieldSize.dp, height = fieldSize.dp) {
            DrawShape(shape = RectangleShape, brush = StrokeColor(Color.Red, 1.px))
            Align(alignment = Alignment.CenterLeft) {
                Container(width = (fieldSize / 4).dp, height = (fieldSize / 2).dp) {
                    DrawShape(shape = RectangleShape, brush = StrokeColor(Color.Green, 1.px))
                }
            }
            Align(alignment = Alignment.CenterLeft) {
                Container(width = (fieldSize / 6).dp, height = (fieldSize / 4).dp) {
                    DrawShape(shape = RectangleShape, brush = StrokeColor(Color.Yellow, 1.px))
                }
            }
        }

[camkadev]

placed all DrawShape inside Stack and now it works

[camkadev]

it looks like a bug, if i place Stack inside sized Container then will be drawn only Red and Yellow shapes and Green will be lost somewhere

[Andrey Kulikov]

there is a special component DrawBorder which draws an inner stroke