Before, I posted here, I Googled a lot. I found the following: MaterialTheme(shapes = MaterialTheme.shapes.copy(medium = RoundedCornerShape(16.dp))){}
from the following SO post: Jetpack compose DropdownMenu With rounded Corners
EDIT: I am using Material Design v3.
MaterialTheme(shapes = MaterialTheme.shapes.copy(medium = RoundedCornerShape(16.dp))) {
IconButton(
onClick = { showMenu = !showMenu }) {
Icon(imageVector = Icons.Outlined.MoreVert, contentDescription = "")
DropdownMenu(
expanded = showMenu,
onDismissRequest = { showMenu = false },
modifier = Modifier.background(MaterialTheme.colorScheme.background).padding(4.dp)
) {
DropdownMenuItem(text = { Text("Refresh", fontSize = 16.sp) }, onClick = { showMenu = false })
DropdownMenuItem(text = { Text("Settings", fontSize = 16.sp) }, onClick = { showMenu = false })
Divider(color = Color.LightGray, thickness = 1.dp)
DropdownMenuItem(text = { Text("Send Feedback", fontSize = 16.sp) }, onClick = { showMenu = false })
}
}
}
Currently it produces the following output:
There certainly is some border radius, it isn't achieving the desired goal. The second screenshot from a third-party app, does have the border radius I am trying to get.
With material3 the default shape used by the DropdownMenu
is defined by the extraSmall
attribute in the shapes
You have to use:
MaterialTheme(
shapes = MaterialTheme.shapes.copy(extraSmall = RoundedCornerShape(16.dp))
){
//... DropdownMenu()
}