title: MaterialButtonToggleGroup in Jetpack Compose
body: <p>I want to implement the <a href="https://material.io/components/buttons/android#toggle-button" rel="noreferrer">MaterialButtonToggleGroup</a> in Jetpack Compose. This component looks like this (image taken from <a href="https://www.journaldev.com/31950/android-materialbuttontogglegroup" rel="noreferrer">here</a>):</p>
  <p><img src="https://cdn.journaldev.com/wp-content/uploads/2019/08/android-material-toggle-basic.png.webp" alt="" /></p>
  <p>So far, I got the following result:</p>
  <p><img src="https://i.stack.imgur.com/4YUIe.png" alt="" /></p>
  <p>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:</p>
  <p><img src="https://i.stack.imgur.com/ajfyS.png" alt="" /></p>
  <p>How can I achieve that the vertical borders between two buttons are not present? My current code looks like this:</p>
  <pre class="lang-kotlin prettyprint-override"><code>    val cornerRadius = 8.dp
  
      Row(
          modifier = Modifier
              .fillMaxWidth()
              .padding(8.dp)
      ) {
          Spacer(modifier = Modifier.weight(1f))
  
          items.forEachIndexed { index, item -&gt;
              OutlinedButton(
                  onClick = { indexChanged(index) },
                  shape = when (index) {
                      // left outer button
                      0 -&gt; RoundedCornerShape(topStart = cornerRadius, topEnd = 0.dp, bottomStart = cornerRadius, bottomEnd = 0.dp)
                      // right outer button
                      items.size - 1 -&gt; RoundedCornerShape(topStart = 0.dp, topEnd = cornerRadius, bottomStart = 0.dp, bottomEnd = cornerRadius)
                      // middle button
                      else -&gt; 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 = &quot;Some text&quot;,
                      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))
      }
  </code></pre>