Align two boxes vertically in a column

Question

I am trying to design a UI like this in Jetpack Compose:

Whenever an option is selected, it should get underlined in the UI as shown above. However, when I try to arrange it in Jetpack compose I get a very weird behavior:

Here's what I tried:

@Composable
fun PaymentsScreen(navController: NavController) {
    var textState by remember { mutableStateOf("EA DUMPLING CARDS") }

    TitleOptionBar(
        options = listOf("EA DUMPLING CARDS", "OTHER PAYMENTS"),
        selectedOption = textState,
        onOptionSelected = {newOption -> textState = newOption}
    )


}

@Composable
fun TitleOptionBar(
    options: List<String>,
    selectedOption: String,
    onOptionSelected: (String) -> Unit
) {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        options.forEach { option ->
            // Create individual option views here
            Box(
                modifier = Modifier.weight(weight = 1F).clickable { onOptionSelected(option) },
                contentAlignment = Alignment.Center
            ) {
                Text(
                    text = option,
                    modifier = Modifier.padding(16.dp),
                    fontWeight = if (option == selectedOption) FontWeight.Bold else FontWeight.Light
                )
                }

            if (option == selectedOption) {
                Box(
                    modifier = Modifier
                        .height(5.dp)
                        .background(Color.Blue)
                        .weight(weight = 1F)
                ) {
                    // This line will appear under the selected box
                }
            }

        }

        }
    }

What should I change in the code?

Answer 1

You can try something like this:

Row(
    modifier = Modifier
        .fillMaxWidth()
        .horizontalScroll(rememberScrollState()),
    horizontalArrangement = Arrangement.SpaceEvenly
) {
    options.forEach { option ->
        // Create individual option views here
        Box(
            modifier = Modifier
                .height(40.dp)
                .padding(horizontal = 16.dp)
                .width(IntrinsicSize.Max)
                .clickable {
                    onOptionSelected(option)
                }
        ) {
            Text(
                modifier = Modifier
                    .align(Alignment.Center)
                    .fillMaxWidth(),
                text = option,
                fontWeight = if (option == selectedOption) FontWeight.Bold else FontWeight.Light
            )
            androidx.compose.animation.AnimatedVisibility(
                visible = option == selectedOption,
                modifier = Modifier
                    .align(Alignment.BottomCenter)
            ) {
                Surface(
                    modifier = Modifier
                        .height(3.dp)
                        .fillMaxWidth(),
                    shape = RoundedCornerShape(3.dp),
                    color = Color.Blue
                ) {}
            }
        }


    }

}

Also, you can checkout material tab.