Welcome to Jetpack-Compose-Starter Discussions! #97
Replies: 2 comments 1 reply
-
Hi atick, I'm Idhar from Indonesia, thank you for making this Jetpack-Compose-Starter, with this you have helped many beginner developers out there including me to learn android with good architecture. I accidentally found your repo and am very impressed with what you have made so far. I have tried this Jetpack-Compose-Starter according to the instructions you wrote and everything works well including adding new navigation, fetching or sending data to other apis. If you don't mind, let me ask about the implementation of ModalNavigationDrawer. Thank you in advance. |
Beta Was this translation helpful? Give feedback.
-
Thank you for your kind and detailed message, Idhar! I'm truly glad to hear that the Jetpack-Compose-Starter has been helpful in your Android development journey, especially for such a meaningful project helping a tahfidz school. I can help you implement the @Composable
fun JetpackNavDrawer(
destinations: List<TopLevelDestination>,
onNavigateToDestination: (TopLevelDestination) -> Unit,
currentDestination: NavDestination?,
) {
ModalDrawerSheet {
Spacer(modifier = Modifier.height(12.dp))
// App Logo or Header
Box(
modifier = Modifier
.padding(horizontal = 16.dp)
.padding(top = 12.dp, bottom = 24.dp),
) {
Text(
text = stringResource(id = R.string.app_name),
style = MaterialTheme.typography.titleLarge,
color = MaterialTheme.colorScheme.primary,
)
}
// Navigation Items
destinations.forEach { destination ->
val selected = currentDestination.isTopLevelDestinationInHierarchy(destination)
NavigationDrawerItem(
icon = {
Icon(
imageVector = if (selected) {
destination.selectedIcon
} else {
destination.unselectedIcon
},
contentDescription = null,
)
},
label = { Text(stringResource(destination.iconTextId)) },
selected = selected,
onClick = { onNavigateToDestination(destination) },
modifier = Modifier.padding(horizontal = 12.dp),
)
if (destinations.last() != destination) {
Spacer(modifier = Modifier.height(8.dp))
}
}
}
} Inside the val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
val scope = rememberCoroutineScope()
...
ModalNavigationDrawer(
drawerState = drawerState,
drawerContent = {
JetpackNavDrawer(
destinations = appState.topLevelDestinations,
onNavigateToDestination = { destination ->
scope.launch {
drawerState.close()
appState.navigateToTopLevelDestination(destination)
}
},
currentDestination = appState.currentDestination,
)
},
) {
Scaffold(
....
JetpackTopAppBar(
titleRes = destination.titleTextId,
actionIcon = Icons.Default.MoreVert,
actionIconContentDescription = stringResource(id = R.string.more),
colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
containerColor = Color.Transparent,
),
onActionClick = { showSettingsDialog = true },
navigationIcon = Icons.Default.Menu,
onNavigationClick = {
scope.launch {
drawerState.open()
}
},
navigationIconContentDescription = stringResource(id = R.string.menu),
) The navigation should now work because:
If you're still experiencing any specific issues, please let me know! I will be in a vacation for the next couple of weeks. I will get back to you once I come back. I'd also be really interested to hear more about how you're planning to use this for the tahfidz school - it's wonderful to see technology being used to support education in this way. Keep up the great work! |
Beta Was this translation helpful? Give feedback.
-
👋 Welcome!
We’re using Discussions as a place to connect with other members of our community. We hope that you:
build together 💪.
To get started, comment below with an introduction of yourself and tell us about what you do with this community.
Beta Was this translation helpful? Give feedback.
All reactions