How to create rounded border Button using Jetpack Compose

Question

I need to add border with rounded corner in Button using Jetpack Compose

Like :

Answer 1

To achieve a button with a border with rounded corners you can use the OutlinedButton component applying in the shape parameter a RoundedCornerShape:

OutlinedButton(
    onClick = { },
    border = BorderStroke(1.dp, Color.Red),
    shape = RoundedCornerShape(50), // = 50% percent
                                    // or shape = CircleShape
    colors = ButtonDefaults.outlinedButtonColors(contentColor = Color.Red)
){
    Text( text = "Save" )
}

Answer 2

Just use modifier as:

modifier = Modifier.border( width = 2.dp,
                            color = Color.Red,
                            shape = RoundedCornerShape(5.dp))

Answer 3

use Clip Modifier, plus you can also choose a specific corner to curve

 modifier = Modifier.clip(RoundedCornerShape(15.dp, 15.dp, 0.dp, 0.dp))