ModalDrawer

Functions summary

Unit

@Composable
ModalDrawer(
    drawerContent: @Composable ColumnScope.() -> Unit,
    modifier: Modifier,
    drawerState: DrawerState,
    gesturesEnabled: Boolean,
    drawerShape: Shape,
    drawerElevation: Dp,
    drawerBackgroundColor: Color,
    drawerContentColor: Color,
    scrimColor: Color,
    content: @Composable () -> Unit
)

Material Design modal navigation drawer

Cmn

Functions

ModalDrawer

Cmn

Artifact: androidx.compose.material:material

View Source

@Composable
fun ModalDrawer(
    drawerContent: @Composable ColumnScope.() -> Unit,
    modifier: Modifier = Modifier,
    drawerState: DrawerState = rememberDrawerState(DrawerValue.Closed),
    gesturesEnabled: Boolean = true,
    drawerShape: Shape = DrawerDefaults.shape,
    drawerElevation: Dp = DrawerDefaults.Elevation,
    drawerBackgroundColor: Color = DrawerDefaults.backgroundColor,
    drawerContentColor: Color = contentColorFor(drawerBackgroundColor),
    scrimColor: Color = DrawerDefaults.scrimColor,
    content: @Composable () -> Unit
): Unit

Material Design modal navigation drawer

Modal navigation drawers block interaction with the rest of an app’s content with a scrim. They are elevated above most of the app’s UI and don’t affect the screen’s layout grid.

Modal drawer
image

See BottomDrawer for a layout that introduces a bottom drawer, suitable when using bottom navigation.

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Button
import androidx.compose.material.DrawerValue
import androidx.compose.material.ModalDrawer
import androidx.compose.material.Text
import androidx.compose.material.rememberDrawerState
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

val drawerState = rememberDrawerState(DrawerValue.Closed)
val scope = rememberCoroutineScope()
ModalDrawer(
    drawerState = drawerState,
    drawerContent = {
        Button(
            modifier = Modifier.align(Alignment.CenterHorizontally).padding(top = 16.dp),
            onClick = { scope.launch { drawerState.close() } },
            content = { Text("Close Drawer") },
        )
    },
    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") }
        }
    },
)

Parameters
`drawerContent: @Composable ColumnScope.() -> Unit`	composable that represents content inside the drawer
`modifier: Modifier = Modifier`	optional modifier for the drawer
`drawerState: DrawerState = rememberDrawerState(DrawerValue.Closed)`	state of the drawer
`gesturesEnabled: Boolean = true`	whether or not drawer can be interacted by gestures
`drawerShape: Shape = DrawerDefaults.shape`	shape of the drawer sheet
`drawerElevation: Dp = DrawerDefaults.Elevation`	drawer sheet elevation. This controls the size of the shadow below the drawer sheet
`drawerBackgroundColor: Color = DrawerDefaults.backgroundColor`	background color to be used for the drawer sheet
`drawerContentColor: Color = contentColorFor(drawerBackgroundColor)`	color of the content to use inside the drawer sheet. Defaults to either the matching content color for `drawerBackgroundColor`, or, if it is not a color from the theme, this will keep the same value set above this Surface.
`scrimColor: Color = DrawerDefaults.scrimColor`	color of the scrim that obscures content when the drawer is open
`content: @Composable () -> Unit`	content of the rest of the UI

Throws
`IllegalStateException`	when parent has `Float.POSITIVE_INFINITY` width