CODEWITHSUNDEEP
androidandroid-jetpack-composeandroid-jetpack-compose-material3android-compose-dropdownmenu
Alix Blaine
Alix Blaine

Reputation: 821

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

Upvotes: 3

Views: 2016

Answers (2)

Umar
Umar

Reputation: 418

as per compsoe 1.7.5 now support for custom dedicated shape with shape prop

@Composable
fun DropdownMenu(
    expanded: Boolean,
    onDismissRequest: () -> Unit,
    modifier: Modifier = Modifier,
    offset: DpOffset = DpOffset(0.dp, 0.dp),
    scrollState: ScrollState = rememberScrollState(),
    properties: PopupProperties = DefaultMenuProperties,
    shape: Shape = MenuDefaults.shape,
    containerColor: Color = MenuDefaults.containerColor,
    tonalElevation: Dp = MenuDefaults.TonalElevation,
    shadowElevation: Dp = MenuDefaults.ShadowElevation,
    border: BorderStroke? = null,
    content: @Composable ColumnScope.() -> Unit
): Unit

Material 3 Dropdown menu

Upvotes: 1

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363945

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

Upvotes: 7

Related Questions