androidkotlinandroid-jetpack-composematerial-components-android

how can i draw a border between DropdownMenuItems in jet pack compose?


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.


Solution

  • 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:

    Screenshot