Search code examples
androidandroid-jetpack-composeandroid-chipsandroid-jetpack-compose-material3

Create chip with outline Jetpack Compose


I have the following composable function to build a Chip:

@Composable
fun CategoryChip(
  category: String,
  isSelected: Boolean = false,
  onSelectedCategoryChanged: (String) -> Unit,
  onExecuteSearch: () -> Unit
) {
  Surface(
    modifier = Modifier.padding(end = 8.dp, bottom = 8.dp),
    elevation = 8.dp,
    shape = RoundedCornerShape(16.dp),
    color = when {
      isSelected -> colorResource(R.color.teal_200)
      else -> colorResource(R.color.purple_500)
    }
  ) {
    Row(modifier = Modifier
      .toggleable(
        value = isSelected,
        onValueChange = {
          onSelectedCategoryChanged(category)
          onExecuteSearch()
        }
      )) {
      Text(
        text = category,
        style = MaterialTheme.typography.body2,
        color = Color.White,
        modifier = Modifier.padding(8.dp)
      )
    }
  }
}

This creates the following chip:

enter image description here

But what I am trying to achieve is the following:

enter image description here

Is it possible to create a shape like that with Jetpack Compose?


Solution

  • Yes, all you have to do is add a border to your surface.

    Surface(
        modifier = Modifier.padding(end = 8.dp, bottom = 8.dp),
        elevation = 8.dp,
        shape = RoundedCornerShape(16.dp),
        border = BorderStroke(
            width = 1.dp,
            color = when {
                isSelected -> colorResource(R.color.teal_200)
                else -> colorResource(R.color.purple_500)
            }
         )
    )