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

With 1.0.0 (tested with 1.0.0-beta07 ) you can use the OutlinedButton component:

    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

There is two way to do this

1) ButtonStyle :-

Button("Save", onClick = {}, 
       style = ButtonStyle(rippleColor = Color.Red,
                           shape = RoundedCornerShape(15.dp),
                           color = Color.White,
                           border = Border(color = Color.Red, width = 2.dp),
                           textStyle = TextStyle(color = Color.Red),
                           paddings = EdgeInsets(left = 40.dp,right = 40.dp)
                          )
     )

2) OutlinedButtonStyle

 Button("Save", onClick = {}, 
           style = OutlinedButtonStyle(
                          Border(color = Color.Red,width = 2.dp),
                          shape = RoundedCornerShape(15.dp),
                          contentColor = Color.Red)
          )
 )

You can change these propertis to change UI of your button

"RoundedCornerShape" will change your button corner radius

"rippleColor" will set ripple effect with your custom color

"Border" this property will change your buttons border color

Answer 3

Just use modifier as:

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

Answer 4

Use the clip Modifier.

Moifier.clip(CircleShape)

Answer 5

This is the button you have in that image:

Button(
       onClick = {},
       shape = RoundedCornerShape(23.dp),
       border = BorderStroke(3.dp, Color.Red),
       colors = ButtonDefaults.buttonColors(contentColor = Color.Red, backgroundColor = Color.White)
       ) {
            Text(
                text = "Save",
                fontSize = 17.sp,
                modifier = Modifier.padding(horizontal = 30.dp, vertical = 6.dp)
            )
        }

Answer 6

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))