MaterialButtonToggleGroup in Jetpack Compose

Question

I want to implement the MaterialButtonToggleGroup in Jetpack Compose. This component looks like this (image taken from here):

So far, I got the following result:

Note, that the vertical grey border next to the vertical blue border are present. In the original, either the colored border or the grey color are present at a time. To make it more clear, have a look at this image with extra thick borders:

How can I achieve that the vertical borders between two buttons are not present? My current code looks like this:

    val cornerRadius = 8.dp

    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp)
    ) {
        Spacer(modifier = Modifier.weight(1f))

        items.forEachIndexed { index, item ->
            OutlinedButton(
                onClick = { indexChanged(index) },
                shape = when (index) {
                    // left outer button
                    0 -> RoundedCornerShape(topStart = cornerRadius, topEnd = 0.dp, bottomStart = cornerRadius, bottomEnd = 0.dp)
                    // right outer button
                    items.size - 1 -> RoundedCornerShape(topStart = 0.dp, topEnd = cornerRadius, bottomStart = 0.dp, bottomEnd = cornerRadius)
                    // middle button
                    else -> RoundedCornerShape(topStart = 0.dp, topEnd = 0.dp, bottomStart = 0.dp, bottomEnd = 0.dp)
                },
                border = BorderStroke(1.dp, if(selectedIndex == index) { MaterialTheme.colors.primary } else { Color.DarkGray.copy(alpha = 0.75f)}),
                colors = if(selectedIndex == index) {
                    // selected colors
                    ButtonDefaults.outlinedButtonColors(backgroundColor = MaterialTheme.colors.primary.copy(alpha = 0.1f), contentColor = MaterialTheme.colors.primary)
                } else {
                    // not selected colors
                    ButtonDefaults.outlinedButtonColors(backgroundColor = MaterialTheme.colors.surface, contentColor = MaterialTheme.colors.primary)
                },
            ) {
                Text(
                    text = "Some text",
                    color = if(selectedIndex == index) { MaterialTheme.colors.primary } else { Color.DarkGray.copy(alpha = 0.9f) },
                    modifier = Modifier.padding(horizontal = 8.dp)
                )
            }
        }

        Spacer(modifier = Modifier.weight(1f))
    }

Thanks for the code example. Well done! – Tim L. Feb 10 '23 at 14:09 — Tim L., Feb 10 '23 at 14:09

score 10 · Accepted Answer · edited Apr 12 '22 at 13:38

10

In the MaterialButtonToggleGroup to prevent a double-width stroke there is a negative marginStart on all except the first child drawing the adjacent strokes directly on top of each other.

Using the same solution:

OutlinedButton(
    modifier = when (index) {
        0 ->
            Modifier
                .offset(0.dp, 0.dp)
                .zIndex(if (selectedIndex == index) 1f else 0f)
        else ->
            Modifier
                .offset((-1 * index).dp, 0.dp)
                .zIndex(if (selectedIndex == index) 1f else 0f)
    },
    // Your code here

edited Apr 12 '22 at 13:38

Cristan

12,083
7
65
69

answered Apr 10 '21 at 16:29

Gabriele Mariotti

320,139
94
887
841

1

Works absolutely fine, thank you very much! I didn't even know there is a `zIndex` modifier. – LN-12 Apr 12 '21 at 09:13

MaterialButtonToggleGroup in Jetpack Compose

1 Answers1