Highlighting the Selected Route
Sync selection with the back stack.
Highlighting the Selected Route is a free Jetpack Compose Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Jetpack Compose Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Selection Must Be Real
A tab should light up because of where the user actually is, not a value you set by hand. The back stack is your source of truth. 🧭
Read the Current Entry
Ask the NavController for the live currentBackStackEntryAsState. It updates automatically every time navigation changes.
val entry by navController.currentBackStackEntryAsState()Get the Active Route
From that entry you read the active route string off its destination. That string tells you which tab is showing.
val route = entry?.destination?.routeCompare to Mark Selected
Now set each item selected by comparing the active route to that tab route. The match becomes the highlighted selected tab.
selected = route == tab.routeHierarchy Beats Equality
For nested graphs, exact equality can miss. Checking the destination hierarchy marks a tab active even on its sub-screens.
selected = entry?.destination?.hierarchy?.any {
it.route == tab.route
} == trueNavigate on Tap
In onClick, call navController.navigate with the tab route to move there. The selection then follows the back stack on its own.
onClick = { navController.navigate(tab.route) }Avoid Stacking Copies
Tapping a tab repeatedly should not pile up screens. Use launchSingleTop so only one copy of a destination stays on top.
navController.navigate(tab.route) {
launchSingleTop = true
}Pop to the Start
Pressing back from any tab should return to your home tab, not walk every tab you visited. popUpTo the start destination fixes that.
popUpTo(navController.graph.startDestinationId) {
saveState = true
}Tint the Active Tab
NavigationBarItem auto-tints the selected item, but you can theme it with colors so the active tab matches your brand.
colors = NavigationBarItemDefaults.colors(
selectedIconColor = MaterialTheme.colorScheme.primary
)Label Visibility
Use alwaysShowLabel to decide if unselected tabs still show text. Showing only the active label is a common clean look.
alwaysShowLabel = falseOne Reactive Loop
Put it together: read the route once, then in your forEach compare each tab to it. Selection now mirrors navigation perfectly.
Quick Check
You wired selection to the back stack. One quick question.
Recap
You synced highlighting to the back stack: read the current route, compare per tab, navigate with launchSingleTop and popUpTo. Selection now stays honest. 🎯
Frequently asked questions
Is the “Highlighting the Selected Route” lesson free?
Yes — the full text of “Highlighting the Selected Route” is free to read here on the web, and the Jetpack Compose Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Jetpack Compose Academy course, upgrade to CoddyKit PRO.
What will I learn in “Highlighting the Selected Route”?
Sync selection with the back stack. You practise Jetpack Compose Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Jetpack Compose Academy?
No prior experience is required. Jetpack Compose Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Highlighting the Selected Route” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Jetpack Compose Academy lesson?
Yes. Every Jetpack Compose Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- NavigationBar with Multiple Tabs
- Highlighting the Selected Route
- Preserving Tab State on Switch
- TabRow & Swipeable Pages