How can I display vertical divider in Row?

Question

I want to add a vertical line to separate my 2 buttons but when I do this the line goes all the way to the bottom of the screen and I lose the Data content. But I want the line to go just after the button cap (they are not really buttons, they are text boxes).

How can I make the vertical line go to where I mark with the red line?

Scaffold(
        topBar = {
            TopAppBar( /* Config*/ )
        },

        content = {
            Box(modifier = Modifier.fillMaxSize()) {

                Column {

                    OptionButtons()
                    Divider()
                    Data( /* Component with a list with data */ )
                }
            }
        }
    )

@Composable
fun OptionButtons() {

    Row {

        Text(
            text = "Option1",
            color = OptionButtonText,
            textAlign = TextAlign.Center,
            modifier = Modifier
                .weight(0.50f)
                .padding(
                    PaddingValues(
                        start = 20.dp,
                        top = 12.dp,
                        end = 20.dp,
                        bottom = 12.dp
                    )
                )
                .clickable { }
        )

        Divide()

        Text(
            text = "Option2",
            color = OptionButtonText,
            textAlign = TextAlign.Center,
            modifier = Modifier
                .weight(0.50f)
                .padding(
                    PaddingValues(
                        start = 20.dp,
                        top = 12.dp,
                        end = 20.dp,
                        bottom = 12.dp
                    )
                )
                .clickable { }
        )
    }

}

Answer 1

Just add this modifier = Modifier.height(IntrinsicSize.Min) in the Row to get minimum space for Row:

@Composable
fun OptionButtons() {

    Row(
        modifier = Modifier
            .height(IntrinsicSize.Min),
        horizontalArrangement = Arrangement.SpaceAround
    ) {

        Text(
            text = "Option1",
            color = Color.Red,
            textAlign = TextAlign.Center,
            modifier = Modifier
                .weight(0.50f)
                .padding(
                    PaddingValues(
                        start = 20.dp,
                        top = 12.dp,
                        end = 20.dp,
                        bottom = 12.dp
                    )
                )
                .clickable { }
        )
        Divider(
            modifier = Modifier
                .width(1.dp)
                .fillMaxHeight()
        )
        Text(
            text = "Option2",
            color = Color.Red,
            textAlign = TextAlign.Center,
            modifier = Modifier
                .weight(0.50f)
                .padding(
                    PaddingValues(
                        start = 20.dp,
                        top = 12.dp,
                        end = 20.dp,
                        bottom = 12.dp
                    )
                )
                .clickable { }
        )
    }

}

Answer 2

You have your text divider and text within a Row{ } block.

What you need to do is to structure it like this

Column{
Row{
Text()
Divider()
Text()
}
Divider()
Row{
Text()
Divider()
Text()
}

}

@Composable
fun OptionButtons() {
    Column {
        Row {
            Text(
                text = "Option1",
                color = OptionButtonText,
                textAlign = TextAlign.Center,
                modifier = Modifier
                    .weight(0.50f)
                    .padding(
                        PaddingValues(
                            start = 20.dp,
                            top = 12.dp,
                            end = 20.dp,
                            bottom = 12.dp
                        )
                    )
                    .clickable { },
            )
            Divider(
                modifier = Modifier
                    .fillMaxHeight()
                    .width(1.dp)
            )
            Text(
                text = "Option2",
                color = OptionButtonText,
                textAlign = TextAlign.Center,
                modifier = Modifier
                    .weight(0.50f)
                    .padding(
                        PaddingValues(
                            start = 20.dp,
                            top = 12.dp,
                            end = 20.dp,
                            bottom = 12.dp
                        )
                    )
                    .clickable { },
            )
        }

        Divider(color = Color.Red, thickness = 1.dp)
        
        Row {
            Text(
                text = ""//whatever value you want to populate with 
                        textAlign = TextAlign . Center,
                modifier = Modifier
                    .weight(0.50f)
                    .padding(
                        PaddingValues(
                            start = 20.dp,
                            top = 12.dp,
                            end = 20.dp,
                            bottom = 12.dp
                        )
                    )

            )
            Divider(
                modifier = Modifier
                    .fillMaxHeight()
                    .width(1.dp)
            )

            Text(
                text = ""//whatever value you want to populate with 
                        textAlign = TextAlign . Center,
                modifier = Modifier
                    .weight(0.50f)
                    .padding(
                        PaddingValues(
                            start = 20.dp,
                            top = 12.dp,
                            end = 20.dp,
                            bottom = 12.dp
                        )
                    )

            )
        }


    }


}

}