Drawer usage in Compose Material3

Question

Is there a way to have the menu overlap the header and footer here?

I am using androidx.compose.material3.Scaffold and NavigationDrawer.

It seems like the Scaffold's drawer slot is removed - https://android-review.googlesource.com/c/platform/frameworks/support/+/1896804 so the instructions at https://developer.android.com/jetpack/compose/layouts/material?hl=hu#drawers no longer apply.

Florian Reisinger · Accepted Answer · 2022-09-06T18:57:18.823

12

Please have a look at ModalNavigationDrawer, which provides the drawer. You can use your Scaffold as a content of the ModalNavigationDrawer.

It seems like this has been split up into multiple components....

edited Sep 06 '22 at 18:57

answered Aug 17 '22 at 11:51

Florian Reisinger

2,638
4
23
34

I was doing this since March this year, forgot to update here – Gabor Aug 22 '22 at 05:33
What do you mean by: "You can use your Scaffold as a content."? Could you please explain in more detail, I have the same problem? – Code Poet Sep 04 '22 at 21:32
6

@CodePoet: I wanted to point out that it has been split into two components. ModelNavigationDrawer was added and the functionality has been removed from the Scaffold. Therefore you need the Scaffold the content (= composable function) of the ModalNavigationDrawer: M2: `Scaffold { /*more content*/ }` M3: `ModalNavigationDrawer { Scaffold { /*more content*/ }}` Does this help? – Florian Reisinger Sep 06 '22 at 07:01
2

The official migration guide also shows how to change your code: [Migration to ModalNavigationDrawer (M2 - M3 Comparison)](https://developer.android.com/jetpack/compose/designsystems/material2-material3#m3_9) And for completion the link to the [ModalNavigationDrawer docs](https://developer.android.com/reference/kotlin/androidx/compose/material3/package-summary#ModalNavigationDrawer(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.material3.DrawerState,kotlin.Boolean,androidx.compose.ui.graphics.Color,kotlin.Function0)) – goldensoju Nov 18 '22 at 05:05
Any idea how to close the ModalNavigationDrawer when the back button is pressed? back button exits the app directly. – Angel Koh Jan 08 '23 at 07:30

score 3 · Answer 2 · answered Feb 14 '23 at 07:15

Create navigation drawer in Material design 3 with Jetpack compose example using ModalNavigationDrawer :

@Preview
@Composable
fun ModalNavigationDrawerSample() {
    val drawerState = rememberDrawerState(DrawerValue.Closed)
    val scope = rememberCoroutineScope()
    // icons to mimic drawer destinations
    val items = listOf(Icons.Default.Favorite, Icons.Default.Face, Icons.Default.Email)
val selectedItem = remember { mutableStateOf(items[0]) }
ModalNavigationDrawer(
    drawerState = drawerState,
    drawerContent = {
        ModalDrawerSheet {
            Spacer(Modifier.height(12.dp))
            items.forEach { item ->
                NavigationDrawerItem(
                    icon = { Icon(item, contentDescription = null) },
                    label = { Text(item.name) },
                    selected = item == selectedItem.value,
                    onClick = {
                        scope.launch { drawerState.close() }
                        selectedItem.value = item
                    },
                    modifier = Modifier.padding(NavigationDrawerItemDefaults.ItemPadding)
                )
            }
        }
    },
    content = {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(text = if (drawerState.isClosed) ">>> Swipe >>>" else "<<< Swipe <<<")
            Spacer(Modifier.height(20.dp))
            Button(onClick = { scope.launch { drawerState.open() } }) {
                Text("Click to open")
            }
        }
    }
)
}

Drawer usage in Compose Material3

2 Answers2