Start with Android Jetpack Compose BottomNavigationBar With Compose Navigation.
Create a new screen.
@Composablefun ImportPhotoScreen(onBack: () -> Unit) { Column { TopAppBar( title = { Text("Import Photos") }, navigationIcon = { IconButton(onClick = { onBack() }) { Icon( imageVector = Icons.Filled.ArrowBack, contentDescription = "Navigate Up", // tint = MaterialTheme.colors.primary ) } }, ) Text("Hello") } BackHandler { // optional: overwrite back handler onBack() }}Edit MainActivity Scaffold to add navigation graph for new screen
@Composablefun JourneyApp() { JourneyTheme { val navController = rememberNavController() val onBack: () -> Unit = { navController.popBackStack() } val screens = listOf( Screen.Home, Screen.Collections, Screen.UserProfile ) // https://developer.android.com/jetpack/compose/navigation Scaffold( bottomBar = { BottomNavigation { val navBackStackEntry by navController.currentBackStackEntryAsState() val currentDestination = navBackStackEntry?.destination screens.forEach { screen -> BottomNavigationItem( icon = { Icon(imageVector = screen.icon, contentDescription = screen.label) }, label = { Text(screen.label) }, selected = currentDestination?.hierarchy?.any { it.route == screen.route } == true, onClick = { navController.navigate(screen.route) { // Pop up to the start destination of the graph to // avoid building up a large stack of destinations // on the back stack as users select items popUpTo(navController.graph.findStartDestination().id) { saveState = true } // Avoid multiple copies of the same destination when // reselecting the same item launchSingleTop = true // Restore state when reselecting a previously selected item restoreState = true } } ) } } } ) { innerPadding -> Box(modifier = Modifier.padding(innerPadding)) { // nav graph NavHost(navController = navController, startDestination = Screen.Home.route) { // add new navigation function composable(Screen.Home.route) { HomeScreen(navigateToImportPhoto = { navController.navigate("importPhoto") }) } composable(Screen.Collections.route) { CollectionsScreen() } composable(Screen.UserProfile.route) { UserProfileScreen() } // new screen, not part of bottom nav composable("importPhoto") { ImportPhotoScreen(onBack = onBack) } } } } }}Edit HomeScreen to allow navigation to ImportPhotoScreen
@Composablefun HomeScreen() { Text(text = "Home") Button(onClick = { navigateToImportPhoto() }) { Text("Import Photos") }}Jetpack Compose Hide Bottomnavigation When Navigate to New Screen