Is it possible to round the edges of a row in jetpack?

Question

This is what I'm trying to achieve:

So I have created 2 rounded buttons in a row and gave different background colors depending whether they're selected or not. The goal is to create a kind of an illusion of a tab/toggle.

The unselected button will have the same color as the row's background color. Unfortunately, since a row is a rectangle shape there comes a residue space at the corners that still shows the background color .

This is my code for the buttons

val cornerRadius = 20.dp

var selectedIndex by remember { mutableStateOf(0)}

val configuration = LocalConfiguration.current
val screenWidth = configuration.screenWidthDp.dp

val items = listOf(

    OutlinedButton(onClick = { /*TODO*/ }) {

    },

    OutlinedButton(onClick = { /*TODO*/ }) {

})

Row(
    modifier = Modifier

        .padding(top = 8.dp)
        .wrapContentHeight()

        .width(screenWidth).background(color = Color.Gray).clip(shape = RoundedCornerShape(20.dp))
) {
  //  Spacer(modifier = Modifier.weight(1f))

        items.forEachIndexed { index, item ->

            OutlinedButton(modifier = Modifier
                .wrapContentHeight()
                .width(screenWidth/2),


                shape = when (index) {
                    // left outer button
                    0 -> (if (selectedIndex == index) {
                        RoundedCornerShape(
                            topStart = cornerRadius,
                            topEnd = cornerRadius,
                            bottomStart = cornerRadius,
                            bottomEnd = cornerRadius
                        )
                    } else {
                        RoundedCornerShape(
                            topStart = cornerRadius,
                            topEnd = cornerRadius,
                            bottomStart = cornerRadius,
                            bottomEnd = cornerRadius
                        )
                    })

                    //rightouterbutton

                    else -> (if (selectedIndex == index) {
                        RoundedCornerShape(
                            topStart = cornerRadius,
                            topEnd = cornerRadius,
                            bottomStart = cornerRadius,
                            bottomEnd = cornerRadius
                        )
                    }
                            else{RoundedCornerShape(
                        topStart = 0.dp,
                        topEnd = cornerRadius,
                        bottomStart = 0.dp,
                        bottomEnd = cornerRadius
                    )})
                },
                border = BorderStroke(
                    1.dp, if (selectedIndex == index) {
                      Color.Transparent
                    } else {
                        Color.Transparent
                    }
                ),
                colors = if (selectedIndex == index) {
                    // colors when selected
                    ButtonDefaults.outlinedButtonColors(
                        backgroundColor = Color.Yellow,
                        contentColor = Color.Black
                    )
                } else {
                    // colors when not selected
                    ButtonDefaults.outlinedButtonColors(
                        backgroundColor = Color.Gray,
                        contentColor = Color.Black
                    )
                },

                onClick = { selectedIndex = index },

                ) {
                if (index == 0) {

                    Text(
                        text = "In progress",
                        color = if (selectedIndex == index) {
                            Color.Black
                        } else {
                            Color.DarkGray.copy(alpha = 0.9f)
                        },
                        modifier = Modifier.padding(horizontal = 8.dp)
                    )
                } else {


                    Text(
                        text = "Completed",
                        color = if (selectedIndex == index) {
                            MaterialTheme.colors.primary
                        } else {
                            Color.DarkGray.copy(alpha = 0.9f)
                        },
                        modifier = Modifier.padding(horizontal = 8.dp)
                    )
                }
            }
        }
    }

Answer 1

Modifier.clip applied after the Modifier.background has no effect in your case, you need to reverse the order. Read more about why the order of modifiers matters in this answer

.clip(shape = RoundedCornerShape(20.dp))
.background(color = Color.Gray)

Another option in the case of Modifier.background is that you can apply the shape specifically to the background color. Note that this solution will not clip other view content to the shape as Modifier.clip does.

.background(color = Color.Gray, shape = RoundedCornerShape(20.dp))

Answer 2

Modifier.background is more effective than using Modifier.clip method.