Reputation: 17219
I need to add border with rounded corner in Button using Jetpack Compose
Like :
Upvotes: 98
Views: 138131
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.
Upvotes: 0
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" )
}
It works with M2 and M3.
Upvotes: 155
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
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
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
Reputation: 1845
Just use modifier as:
modifier = Modifier.border( width = 2.dp,
color = Color.Red,
shape = RoundedCornerShape(5.dp))
Upvotes: 65