
На данный момент я получил следующий результат:

Обратите внимание, что рядом с вертикальной синей рамкой присутствует вертикальная серая рамка. В оригинале одновременно присутствует либо цветная рамка, либо серый цвет. Чтобы было более понятно, взгляните на это изображение с очень толстыми рамками:

Как добиться того, чтобы между двумя кнопками не было вертикальных границ? Мой текущий код выглядит следующим образом:
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))
}
Подробнее здесь: https://stackoverflow.com/questions/670 ... ck-compose