Problem:
I have an issue with the hierarchy of my Compose Navigation. The version of compose-navigation I am using is: androidx.navigation:navigation-compose:2.7.7.
Background:
I am trying to implement simple navigation with bottom navigation and three tabs. Each tab hosts its own nested navigation, consisting of two screens: the main tab content and a details screen, which is reused across nested graphs.
Main Activity with NavHost for the Tabs:
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
TestNavigationTheme {
val tabsController = rememberNavController()
Scaffold(
bottomBar = {
NavigationBar {
val navBackStackEntry by tabsController.currentBackStackEntryAsState()
val currentDestination = navBackStackEntry?.destination
BottomTabs.items.forEach { navigationItem ->
NavigationBarItem(
label = { Text(navigationItem.title) },
selected = currentDestination
?.hierarchy
?.any { it.route == navigationItem.route } == true,
icon = { Icon(navigationItem.icon, navigationItem.title) },
onClick = {
tabsController.navigate(navigationItem.route) {
popUpTo(tabsController.graph.findStartDestination().id) {
saveState = true
}
launchSingleTop = true
restoreState = true
}
}
)
}
}
}
) { paddingValues ->
NavHost(
navController = tabsController,
startDestination = BottomTabs.Feed.route,
modifier = Modifier.padding(paddingValues = paddingValues)
) {
navigation(
route = BottomTabs.Feed.route,
startDestination = "feed"
) {
composable(route = "feed") {
FeedScreen {
tabsController.navigate("details/feed")
}
}
details()
}
navigation(
route = BottomTabs.Search.route,
startDestination = "search"
) {
composable(route = "search") {
SearchScreen {
tabsController.navigate("details/search")
}
}
details()
}
navigation(
route = BottomTabs.Favourites.route,
startDestination = "fav"
) {
composable(route = "fav") {
FavouritesScreen {
tabsController.navigate("details/fav")
}
}
details()
}
}
}
}
}
}
private fun NavGraphBuilder.details() {
composable(
route = "details/{argument}",
arguments = listOf(
navArgument("argument") { type = NavType.StringType }
)
) { backStackEntry ->
DetailsScreen(
argument = backStackEntry
.arguments
?.getString("argument")
?: "Couldn't obtain the argument"
)
}
}
}
BottomTabs:
sealed class BottomTabs(val route: String, val title: String, val icon: ImageVector) {
data object Feed : BottomTabs("feed-tab", "Feed", Icons.Default.Home)
data object Search : BottomTabs("search-tab", "Search", Icons.Default.Search)
data object Favourites : BottomTabs("fav-tab", "Favourites", Icons.Default.Favorite)
companion object {
val items = listOf(Feed, Search, Favourites)
}
}
Tab Screens:
@Composable
fun FeedScreen(navigateToDetails: () -> Unit) {
Column(
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier.fillMaxSize()
) {
Text("Hi, I'm Feed screen")
Spacer(modifier = Modifier.size(40.dp))
Button(onClick = navigateToDetails) {
Text(text = "Go to details")
}
}
}
@Composable
fun SearchScreen(navigateToDetails: () -> Unit) {
Column(
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier.fillMaxSize()
) {
Text("Hi, I'm Search screen")
Spacer(modifier = Modifier.size(40.dp))
Button(onClick = navigateToDetails) {
Text(text = "Go to details")
}
}
}
@Composable
fun FavouritesScreen(navigateToDetails: () -> Unit) {
Column(
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier.fillMaxSize()
) {
Text("Hi, I'm Favourites screen")
Spacer(modifier = Modifier.size(40.dp))
Button(onClick = navigateToDetails) {
Text(text = "Go to details")
}
}
}
Details Screen:
@Composable
fun DetailsScreen(argument: String) {
Column(
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier.fillMaxSize()
) {
Text("I'm details screen")
Text("Your argument is: $argument")
}
}
Issue:
You can find this code inside NavigationBarItem, which I took from Google's guide to navigation:
selected = currentDestination
?.hierarchy
?.any { it.route == navigationItem.route } == true
When I switch to the third tab ("fav-tab") and press a button to open the details screen, the details screen opens correctly within the fav-tab. However, the navigation bar highlights the feed-tab as selected instead of the fav-tab.
What have I tried:
I tried debugging the navigation recomposition cycle by placing a breakpoint in NavigationBarItem. Here is the hierarchy:
I don't understand why the feed-tab appears as the root of the hierarchy. In my opinion, it should be:
"details/{argument}"
"fav-tab"
because I navigated to the details screen from the fav-tab, not the feed-tab.
What am I doing wrong in my implementation? Any thoughts or advice would be greatly appreciated!
