Android - Jetpack Compose draw text with centered lines on sides

user_5165326 0
Viewed 286

I am trying to make this simple view in Compose, but cant seem to get it right. enter image description here

I have tried using dividers, and now switched to canvas, but cant seem to get correct result.

Row{
    Line()
    ClickableText(text = AnnotatedString("Show replies"),
                 modifier = Modifier.weight(1f),
                 onClick = { showReplies.value = true })
    Line()
    }

  @Composable
fun RowScope.Line() {
    Canvas(modifier = Modifier.fillMaxSize().weight(1f)) {
        // Fetching width and height for
        // setting start x and end y
        val canvasWidth = size.width
        val canvasHeight = size.height

        // drawing a line between start(x,y) and end(x,y)
        drawLine(
            start = Offset(x = 0f, y = canvasHeight/2),
            end = Offset(x = canvasWidth, y = canvasHeight/2),
            color = Color.Red,
            strokeWidth = 5F
        )
    }
}

I have played with arragments, weights, sizes, but always get some quirky result.

android-jetpack android-jetpack-compose kotlin android
1 Answers

Try this:

@Composable
fun Replies() {
    Row(Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) {
        Box(modifier = Modifier
            .height(2.dp)
            .weight(1f)
            .background(Color.Gray)) {}
        ClickableText(
            text = AnnotatedString("Show replies"), onClick = {}, modifier = Modifier.weight(1f),
            style = TextStyle(
                textAlign = TextAlign.Center
            ),
        )
        Box(modifier = Modifier
            .height(2.dp)
            .weight(1f)
            .background(Color.Gray)) {}
    }
}
user_55137880
Related