What is Navigation Drawer?
Navigation Drawer is the most important components of Material Design. There are two types of navigation drawers: standard and modal.
Navigation Drawer is a sliding left menu that is used to display the important links in the application. Navigation drawer makes it easy to navigate to and fro between those links. It’s not visible by default and it needs to opened either by sliding from left or clicking its icon in the Action Bar.
In this tutorial we will learn to create a simple Modal Navigation Drawer. Here we are using Android Studio Koala version.
Steps-
MainActivity
Copy this code →
package com.example.navigationdrawercompose
import...
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
NavigationDrawerComposeTheme {
Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
NavDrawer(innerPadding)
}
}
}
}
}NavDrawer
Copy this code →
package com.example.navigationdrawercompose
import...
@Composable
fun NavDrawer(innerPadding: PaddingValues) {
val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
val scope = rememberCoroutineScope()
ModalNavigationDrawer(
drawerState=drawerState,
drawerContent = {
ModalDrawerSheet {
Row (Modifier.padding(16.dp)
.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween){
Text("Drawer title")
IconButton(onClick = { scope.launch { drawerState.close() } }) {
Icon(imageVector = Icons.Default.ArrowBack,
contentDescription = null)
}
}
Divider()
NavigationDrawerItem(
label = { Text(text = "Drawer Item") },
selected = false,
onClick = { /*TODO*/ })
}
}) {
IconButton(onClick = { scope.launch {drawerState.apply {
if (isClosed) open() else close()}
} },Modifier.padding(18.dp)) {
Icon(imageVector = Icons.Default.Menu,
contentDescription = null)
}
Box(
modifier = Modifier
.fillMaxSize(),
// .background(MaterialTheme.colorScheme.background),
contentAlignment = Alignment.Center
) {
Text(text = "Content Page")
}
}
}OUTPUT:
