How to change the shape of a Row's border in Jetpack Compose?

Question

Problem description

How to change the shape of a Row border in Jetpack Compose?

I'm creating a custom button in jetpack compose and for that I'm using a Row to align the content horizontally. I need this custom button to have the following format:

However my code in compose renders the following element, without the rounded edges:

The code for this compose function is below:

@Composable
fun LargeQuantityButton(
    modifier: Modifier = Modifier,
    onPlusClick: () -> Unit,
    onMinusClick: () -> Unit,
    text: String,
) = Row(
    modifier = modifier
        .border(
            border = ButtonDefaults.outlinedBorder,
            shape = RoundedCornerShape(4.dp)
        ),
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.SpaceBetween
) {
    RemoveIcon(action = onMinusClick)
    Text(
        text = text,
        fontWeight = FontWeight.W400
    )
    AddIcon(action = onPlusClick)
}

My attempt fails

I tried adding the clip function call right after the border call of the Modifier like this:

@Composable
fun LargeQuantityButton(
    modifier: Modifier = Modifier,
    onPlusClick: () -> Unit,
    onMinusClick: () -> Unit,
    text: String,
) = Row(
    modifier = modifier
        .border(border = ButtonDefaults.outlinedBorder)
        .clip(shape = RoundedCornerShape(4.dp)),
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.SpaceBetween
) {
    RemoveIcon(action = onMinusClick)
    Text(
        text = text,
        fontWeight = FontWeight.W400
    )
    AddIcon(action = onPlusClick)
}

But it didn't work either.

your screenshot looks like from the second code block, the reasons it doesn't work can be found in [this answer](https://stackoverflow.com/a/71160579/3585796). But the first code block rounds border correctly to me. — Phil Dukhov, Feb 23 '22 at 02:40

score 8 · Accepted Answer · answered Feb 23 '22 at 02:32

I didn't understand exactly why but when I added a .padding after the Modifier.border statement the problem was solved:

@Composable
fun LargeQuantityButton(
    modifier: Modifier = Modifier,
    onPlusClick: () -> Unit,
    onMinusClick: () -> Unit,
    text: String,
) = Row(
    modifier = modifier
        .border(
            border = ButtonDefaults.outlinedBorder,
            shape = RoundedCornerShape(4.dp)
        )
        .padding(PaddingValues(horizontal = 8.dp)),
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.SpaceBetween
) {
    RemoveIcon(action = onMinusClick)
    Text(
        text = text,
        fontWeight = FontWeight.W500
    )
    AddIcon(action = onPlusClick)
}

Result:

How to change the shape of a Row's border in Jetpack Compose?

Problem description

My attempt fails

1 Answers1