how todo border bottom like css in jetpack compose

Question

Im just learning jetpack compose, an I got a problem to make a border.. so I wanna make a border just in partial side like border bottom, border top etc. only

so how to make like that

 Row(horizontalArrangement = Arrangement.Start,
    verticalAlignment = Alignment.CenterVertically,
    modifier = Modifier
        .fillMaxWidth()
        .padding(horizontal = 16.dp, vertical = 8.dp)
        .defaultMinSize(minHeight = 56.dp)) {}

thanks

Answer 1

You can try this code & draw lines,

Row(
    horizontalArrangement = Arrangement.Start,
    verticalAlignment = Alignment.CenterVertically,
    modifier =
    Modifier
        .fillMaxWidth()
        .wrapContentHeight()
        .wrapContentWidth()
        .padding(horizontal = 16.dp, vertical = 8.dp)
        .drawBehind {
            val strokeWidth = 2f
            val x = size.width - strokeWidth
            val y = size.height - strokeWidth

            //top line
            drawLine(
                color = Color.Green,
                start = Offset(0f, 0f), //(0,0) at top-left point of the box
                end = Offset(x, 0f), //top-right point of the box
                strokeWidth = strokeWidth
            )

            //left line
            drawLine(
                color = Color.Magenta,
                start = Offset(0f, 0f), //(0,0) at top-left point of the box
                end = Offset(0f, y),//bottom-left point of the box
                strokeWidth = strokeWidth
            )

            //right line
            drawLine(
                color = Color.Red,
                start = Offset(x, 0f),// top-right point of the box
                end = Offset(x, y),// bottom-right point of the box
                strokeWidth = strokeWidth
            )

            //bottom line
            drawLine(
                color = Color.Cyan,
                start = Offset(0f, y),// bottom-left point of the box
                end = Offset(x, y),// bottom-right point of the box
                strokeWidth = strokeWidth
            )
        }) {
    Column(modifier = Modifier.padding(2.dp)) {
        Text(text = "testing", color = Color.Black)
        Text(text = "another testing")
    }
}