androidandroid-jetpack-composeandroid-buttonandroid-compose-buttonandroid-jetpack-compose-button

How to create a circular Outlined button with jetpack compose


I am trying to create a circular OutlinedButton with an icon in the center without text.

    OutlinedButton(onClick = { /*TODO*/ },
        shape = CircleShape,
        border= BorderStroke(1.dp, Color.Blue)
    ) {
        Icon(Icons.Default.Add, contentDescription = "content description")
    }

The final button has an oval shape:

enter image description here

Using an IconButton:

    IconButton(onClick = {  },
        modifier = Modifier
            .clip(CircleShape)
            .border(1.dp, Color.Red)
    ) {
        Icon(Icons.Default.Add, contentDescription = "content description",tint = Color.Red)
    }

This is the final result:

enter image description here


Solution

  • You can use the OutlinedButton removing the contentPadding.
    Something like:

        OutlinedButton(onClick = { /*TODO*/ },
            modifier= Modifier.size(50.dp),  //avoid the oval shape
            shape = CircleShape,
            border= BorderStroke(1.dp, Color.Blue),
            contentPadding = PaddingValues(0.dp),  //avoid the little icon
            colors = ButtonDefaults.outlinedButtonColors(contentColor =  Color.Blue)
        ) {
             Icon(Icons.Default.Add, contentDescription = "content description")
        }
    

    enter image description here

    or the IconButton removing the clip modifier and using the shape inside the border parameter:

        IconButton(onClick = {  },
              modifier = Modifier
                  .then(Modifier.size(50.dp))
                  .border(1.dp, Color.Red, shape = CircleShape)
                  ) {
            Icon(Icons.Default.Add, contentDescription = "content description", tint = Color.Red)
        }
    

    enter image description here