How to remove elevation on DropDownMenu in jetpack compose

Question

Im trying to make a DropDownMenu that is going to have transparent background, so that user can see only it's content.

I've tried to achieve that by wrapping the DropDownMenu into MaterialTheme composable and override the colors property, and this is almost successful, but I can see the border and elevation of the Card (i guess) composable used for implementing DropDownMenu. Is there a way to make it fully transparent? Here is the code example:

MaterialTheme(
            colors = MaterialTheme.colors.copy(
                background = Color.Transparent,
                onBackground = Color.Transparent,
                surface = Color.Transparent
            )
        ) {
            ListItemComposable(
                modifier = Modifier.align(Alignment.TopCenter),
                text = dropDownItems.first().name,
                onClick = { isDropDownMenuVisible = true }
            )

            DropdownMenu(
                expanded = isDropDownMenuVisible,
                onDismissRequest = { isDropDownMenuVisible = false },
            ) {
                dropDownItems.forEach { dropDownItem ->
                    DropdownMenuItem(
                        onClick = { isDropDownMenuVisible = false }
                    ) {
                        ListItemComposable(
                            modifier = Modifier,
                            text = dropDownItem.name
                        ) {}
                    }
                }
            }
        }

And here is how it looks like:

score 2 · Answer 1 · answered Jul 01 '23 at 07:15

Looking into the DropdownMenu source code, we can see this in DropdownMenuContent.

Surface(
    // Other properties
    shadowElevation = MenuTokens.ContainerElevation
)

In MenuTokens,

val ContainerElevation = ElevationTokens.Level2

And

internal object ElevationTokens {
    val Level2 = 3.0.dp
}

So, an elevation of 3.dp is hard-coded into DropdownMenu without any option to override it for now.

I am using Jetpack Compose Version = "1.5.0-beta02"

Possible solutions, for now, would be to copy the whole of DropdownMenu and DropdownMenuContent to override this as required.

Created an issue for tracking, kindly upvote if this is required for your app.
https://issuetracker.google.com/issues/289554448

How to remove elevation on DropDownMenu in jetpack compose

1 Answers1