androidandroid-jetpack-composeandroid-jetpack-compose-material3android-compose-dropdownmenu

Round corners for Dropdown menu compose android


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:

enter image description here

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.

enter image description here


Solution

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

    enter image description here