DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How to Add Navigation Drawer in Jetpack Compose?
Vincent Tsen
Vincent Tsen

Posted on • Updated on • Originally published at vtsen.hashnode.dev

How to Add Navigation Drawer in Jetpack Compose?

Step-by-step guides to add navigation drawer in Jetpack Compose for beginners

This is part of the Jetpack Compose navigation series:

This tutorial is built on top of this existing bottom navigation demo app in part 1 that I created previously.

The app starts with login screen, then navigates to home screen. From home screen, you can navigate to either profile or search screen.

We're going to add the navigation drawer starting from the home screen.

1. Add Top App Bar with Navigation Icon Menu

The top app bar looks like this in home screen.

How_to_Add_Navigation_Drawer_in_Jetpack_Compose_01.png

  • Implement TopBar() Composable
  • Return if current route is login path, we only want to start showing the top app bar staring from home screen
@Composable
fun TopBar(
    navController: NavController,
    onNavigationIconClick: () -> Unit,
) {
    val navBackStackEntry by navController.currentBackStackEntryAsState()
    val currentRoute = navBackStackEntry?.destination?.route

    if (currentRoute == null || currentRoute == NavRoute.Login.path) {
        return
    }

    TopAppBar(
        title = {
            Text(text = stringResource(id = R.string.app_name))
        },
        navigationIcon = {
            IconButton(onClick = onNavigationIconClick) {
                Icon(
                    imageVector = Icons.Default.Menu,
                    contentDescription = null,
                )
            }
        },
    )
}
Enter fullscreen mode Exit fullscreen mode
  • In MainScreen(), pass in the TopBar() as parameter into Scaffold()
  • Remember also pass in the scaffoldState. If you miss this step, the navigation drawer won't be shown
  • When the navigation icon is clicked, start the coroutine to call scaffoldState.drawerState.open() to open the navigation drawer (to be implemented later)
val navController = rememberNavController()
val scaffoldState = rememberScaffoldState()
val scope =  rememberCoroutineScope()

Scaffold(
    scaffoldState = scaffoldState,
    topBar = { TopBar(
        navController =navController,
        onNavigationIconClick = {
            scope.launch {
                scaffoldState.drawerState.open()
            }
        }
    ) },
    bottomBar = { BottomBarNav(navController = navController) },
) {
    NavGraph(navController)
}
Enter fullscreen mode Exit fullscreen mode

2. Add Navigation Drawer and Body

The preview looks like this.

How_to_Add_Navigation_Drawer_in_Jetpack_Compose_02.png

  • Add drawer header, the header is just a simple text
@Composable
fun DrawerHeader(){
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(vertical = 64.dp)
        ,
        horizontalArrangement = Arrangement.Center,
    ) {
        Text(text = "Header", fontSize = 60.sp)
    }
}
Enter fullscreen mode Exit fullscreen mode
  • Add drawer menu item which contains icon and text in a row
@Composable
private fun DrawerMenuItem(
    iconDrawableId: Int,
    text: String,
    onItemClick: () -> Unit){
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .clickable {onItemClick()}
            .padding(16.dp),
        verticalAlignment = Alignment.CenterVertically,
    ){
        Icon(
            painter = painterResource(iconDrawableId),
            contentDescription = null,
        )
        Spacer(modifier = Modifier.width(16.dp))
        Text(text = text, )
    }
}
Enter fullscreen mode Exit fullscreen mode
  • Add drawer body to include the home and search drawer menu item
@Composable
fun DrawerBody(navController: NavHostController?, closeNavDrawer: () -> Unit) {
    Column {
        DrawerMenuItem(
            iconDrawableId = R.drawable.ic_home,
            text = NavRoute.Home.path,
            onItemClick = {
                navController?.navigate(NavRoute.Home.path)
                closeNavDrawer()
            }
        )
        DrawerMenuItem(
            iconDrawableId = R.drawable.ic_search,
            text = NavRoute.Search.path,
            onItemClick = {
                navController?.navigate(NavRoute.Search.withArgs("liang moi"))
                closeNavDrawer()
            }
        )
    }
}

Enter fullscreen mode Exit fullscreen mode

Done

How_to_Add_Navigation_Drawer_in_Jetpack_Compose_03.gif

Source Code

GitHub Repository: Demo_SimpleNavigationCompose(bottom_nav_drawer branch)


Originally published at https://vtsen.hashnode.dev.

Top comments (0)

12 Gorgeous UI Components for Your Design Inspiration

>> Check out this classic DEV post <<