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 theTopBar()
as parameter intoScaffold()
-
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)