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
) {}
}
}
}
}
Looking into the
DropdownMenu
source code, we can see this inDropdownMenuContent
.In
MenuTokens
,And
So, an elevation of
3.dp
is hard-coded intoDropdownMenu
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
andDropdownMenuContent
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