How to create rounded border Button using Jetpack Compose

Question

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

Like :

Solution 1

With 1.0.x 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" )
    }

Solution 2

Just use modifier as:

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

Solution 3

Use the clip Modifier.

Modifier.clip(CircleShape)

Solution 4

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

View more solutions

Comments

[Sanjayrajsinh]

Thank you sir , but i want with custom ui with rounded border

[Gabriele Mariotti]

@Sanjayrajsinh the OutlinedButtonStyle has rounded corners by default. You can in any case override the value using shape = RoundedCornerShape(x.dp)

[Gabriele Mariotti]

@Sanjayrajsinh or using a percent value with shape = RoundedCornerShape(50). I've just updated the answer.

[Ranjithkumar]

@GabrieleMariotti I don't see any difference between Button() and OutlinedButton(). If I use the same code with Button() it will give same result. May I know what's the difference ?

[Gabriele Mariotti]

@RanjithKumar The OutlinedButton is a Button with an outlinedBorder and custom colors as backgroundColor= MaterialTheme.colors.surface and contentColor = MaterialTheme.colors.primary

[Ranjithkumar]

@GabrieleMariotti thank you so much. You are my guru.