how can i draw a border between DropdownMenuItems in jet pack compose?
I want to draw a bottom border or a border between the diferent items in a DropDownMenu in jetpack compose in my Topbar Menu.
I try to do this with de modifier = Modifier.border() but i can't.
If you are using Material Design 2, check out the Divider
Composable:
DropDownMenuItem(/* ... */)
Divider(startIndent = 8.dp, thickness = 1.dp, color = Color.Black)
DropDownMenuItem(/* ... */)
If you are using Material Design 3, check out the HorizontalDivider
Composable:
DropDownMenuItem(/* ... */)
HorizontalDivider()
DropDownMenuItem(/* ... */)
Sample:
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ActionDemo() {
var showMenu by remember { mutableStateOf(false) }
Scaffold(
topBar = {
TopAppBar(
title = { Text("Action Bar") },
actions = {
IconButton(
onClick = {}
) {
Icon(Icons.Default.AccountBox, "")
}
IconButton(onClick = { showMenu = !showMenu }) {
Icon(Icons.Default.MoreVert, "")
}
DropdownMenu(
expanded = showMenu,
onDismissRequest = { showMenu = false }
) {
DropdownMenuItem(
onClick = { /*TODO*/ },
text = {
Text("Licenses")
},
leadingIcon = {
Icon(Icons.Filled.LocalPolice, "")
}
)
HorizontalDivider()
DropdownMenuItem(
onClick = { /*TODO*/ },
text = {
Text("Settings")
},
leadingIcon = {
Icon(Icons.Filled.Settings, "")
}
)
}
}
)
}
) {
Text(modifier = Modifier.padding(it), text = "Hello World")
}
}
Output: