How to create rounded border Button using Jetpack Compose

Question

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

Like :

Gabriele Mariotti · Answer 1 · 2023-03-12T10:00:34.373

110

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

It works with M2 and M3.

edited Mar 12 '23 at 10:00

answered Nov 15 '19 at 11:06

Gabriele Mariotti

320,139
94
887
841

1

Thank you sir , but i want with custom ui with rounded border – Sanjayrajsinh Nov 15 '19 at 11:13
@Sanjayrajsinh the `OutlinedButtonStyle` has rounded corners by default. You can in any case override the value using `shape = RoundedCornerShape(x.dp)` – Gabriele Mariotti Nov 15 '19 at 11:15
1

@Sanjayrajsinh or using a percent value with `shape = RoundedCornerShape(50)`. I've just updated the answer. – Gabriele Mariotti Nov 15 '19 at 11:18
@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 ? – Ranjithkumar Aug 16 '21 at 11:16
1

@RanjithKumar The `OutlinedButton` is a `Button` with an `outlinedBorder` and custom colors as `backgroundColor= MaterialTheme.colors.surface` and `contentColor = MaterialTheme.colors.primary` – Gabriele Mariotti Aug 16 '21 at 11:54

score 49 · Answer 2 · answered Aug 13 '21 at 16:09

49

Just use modifier as:

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

answered Aug 13 '21 at 16:09

Pratik Pitale

1,655
1
16
30

score 18 · Answer 3 · answered Oct 07 '21 at 06:45

18

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

answered Oct 07 '21 at 06:45

RJnr

670
6
19

score 16 · Answer 4 · edited Dec 29 '21 at 06:17

16

Use the clip Modifier.

Modifier.clip(CircleShape)

edited Dec 29 '21 at 06:17

Phil Dukhov

67,741
15
184
220

answered Jun 15 '21 at 20:02

Richard Onslow Roper

5,477
2
11
42

score 7 · Answer 5 · answered Sep 12 '21 at 21:01

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

shape = RoundedCornerShape(23.dp) do the trick in material 3! — Daniele Ceglia, Sep 20 '22 at 08:35

score 3 · Answer 6 · answered Oct 21 '22 at 07:52

Try this

               Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(40.dp)
                        .padding(4.dp)
                        .clip(RoundedCornerShape(8.dp))
                        .background(Color.White)
                        .border(
                            1.dp,
                            Color.RED,
                            shape = RoundedCornerShape(8.dp),
                        )

                ) {
                    Text(
                        modifier = Modifier.align(Alignment.Center),
                        text = "Save",
                        color = Color.RED,
                        style = MaterialTheme.typography.h6
                    )
                }

How to create rounded border Button using Jetpack Compose

6 Answers6

Linked