Easy methods to Add Navigation Drawer in Jetpack Compose?

That is a part of the Jetpack Compose navigation sequence:

This tutorial is constructed on prime of this present backside navigation demo app partly 1 that I created beforehand.

The app begins with login display screen, then navigates to dwelling display screen. From dwelling display screen, you may navigate to both profile or search display screen.

We’ll add the navigation drawer ranging from the house display screen.

The highest app bar seems like this in dwelling display screen.

• Implement TopBar() Composable

• Return if present route is login path, we solely need to begin displaying the highest app bar staring from dwelling display screen

@Composable
enjoyable TopBar(
    navController: NavController,
    onNavigationIconClick: () -> Unit,
) {
    val navBackStackEntry by navController.currentBackStackEntryAsState()
    val currentRoute = navBackStackEntry?.vacation spot?.route

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

    TopAppBar(
        title = {
            Textual content(textual content = stringResource(id = R.string.app_name))
        },
        navigationIcon = {
            IconButton(onClick = onNavigationIconClick) {
                Icon(
                    imageVector = Icons.Default.Menu,
                    contentDescription = null,
                )
            }
        },
    )
}

• In MainScreen(), move within the TopBar() as parameter into Scaffold()

• Keep in mind additionally move within the scaffoldState. If you happen to miss this step, the navigation drawer will not be proven

• When the navigation icon is clicked, begin the coroutine to name scaffoldState.drawerState.open() to open the navigation drawer (to be carried out 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)
}

2. Add Navigation Drawer and Physique

The preview seems like this.

• Add drawer header, the header is only a easy textual content

@Composable
enjoyable DrawerHeader(){
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(vertical = 64.dp)
        ,
        horizontalArrangement = Association.Heart,
    ) {
        Textual content(textual content = "Header", fontSize = 60.sp)
    }
}

• Add drawer menu merchandise which comprises icon and textual content in a row

@Composable
non-public enjoyable DrawerMenuItem(
    iconDrawableId: Int,
    textual content: 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))
        Textual content(textual content = textual content, )
    }
}

• Add drawer physique to incorporate the house and search drawer menu merchandise

@Composable
enjoyable DrawerBody(navController: NavHostController?, closeNavDrawer: () -> Unit) {
    Column {
        DrawerMenuItem(
            iconDrawableId = R.drawable.ic_home,
            textual content = NavRoute.Dwelling.path,
            onItemClick = {
                navController?.navigate(NavRoute.Dwelling.path)
                closeNavDrawer()
            }
        )
        DrawerMenuItem(
            iconDrawableId = R.drawable.ic_search,
            textual content = NavRoute.Search.path,
            onItemClick = {
                navController?.navigate(NavRoute.Search.withArgs("liang moi"))
                closeNavDrawer()
            }
        )
    }
}

Executed

Supply Code

GitHub Repository: Demo_SimpleNavigationCompose(bottom_nav_drawer department)