Sanjayrajsinh
Sanjayrajsinh

Reputation: 17219

How to create rounded border Button using Jetpack Compose

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

Like :

enter image description here

Upvotes: 98

Views: 138131

Answers (7)

tushar agarwal
tushar agarwal

Reputation: 41

Row(
modifier = Modifier
.border(2.dp, Color.Red, RoundedCornerShape(14.dp))
.clip(RoundedCornerShape(14.dp))
.width(90.dp)
.height(40.dp)
.clickable{},
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center
) {

    Text(
        text = "Save",
        fontSize = 16.sp,
        color = Color
.Red
    )
}

This is one of the way by which we can achieve this functionality , it also does not have default padding like button. .clip(RoundedCornerShape(14.dp)) this line will match the click shadow with applied border.enter image description here

Upvotes: 0

Gabriele Mariotti
Gabriele Mariotti

Reputation: 364614

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

enter image description here

It works with M2 and M3.

Upvotes: 155

deas maha putra
deas maha putra

Reputation: 103

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

Upvotes: 7

Richard Onslow Roper
Richard Onslow Roper

Reputation: 6863

Use the clip Modifier.

Modifier.clip(CircleShape)

Upvotes: 18

RJnr
RJnr

Reputation: 866

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

Upvotes: 30

Mahdi nezam parast
Mahdi nezam parast

Reputation: 649

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

Upvotes: 11

Pratik Pitale
Pratik Pitale

Reputation: 1845

Just use modifier as:

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

Upvotes: 65

Related Questions