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

There's no built-in way, have you checked [this answer](https://stackoverflow.com/a/68595142/3585796)? — Phil Dukhov, Apr 27 '22 at 02:34
already checked but don't solve the proble... alternatively I use a box with background — Umar, Apr 27 '22 at 04:46
May be related to modifiers order, check out [this answer](https://stackoverflow.com/a/65698101/3585796) for details. If this doesn't help, update your question with code you've tried — Phil Dukhov, Apr 27 '22 at 06:40

score 0 · Answer 1 · answered Apr 28 '22 at 12:04

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")
    }
}

how todo border bottom like css in jetpack compose

1 Answers1