Android Academy · Lesson

Bottom Navigation

Build tabbed bottom navigation.

Bottom Navigation is a free Android Academy lesson on CoddyKit — lesson 4 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 Android Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Bottom Navigation Bars

Many apps put their top-level sections in a bottom navigation bar. Compose provides NavigationBar and NavigationBarItem for this.

NavigationBar

NavigationBar is the container, usually placed in a Scaffold's bottomBar slot. It holds several NavigationBarItems.

NavigationBar {
    // items go here
}

NavigationBarItem

Each tab is a NavigationBarItem with an icon, optional label, a selected flag, and an onClick.

NavigationBarItem(
    selected = true,
    onClick = { },
    icon = { Icon(Icons.Default.Home, contentDescription = "Home") },
    label = { Text("Home") }
)

Modeling the Tabs

Define your tabs as data so you can loop over them. A simple data class with a route, label, and icon works well.

data class Tab(val route: String, val label: String, val icon: ImageVector)

val tabs = listOf(
    Tab("home", "Home", Icons.Default.Home),
    Tab("profile", "Profile", Icons.Default.Person)
)

Tracking the Current Route

To highlight the active tab you need the current route. Read it from the controller's current back stack entry.

val backStackEntry by navController.currentBackStackEntryAsState()
val currentRoute = backStackEntry?.destination?.route

Marking Selected

Compare each tab's route to currentRoute to set the selected flag, so the bar highlights the right item.

NavigationBarItem(
    selected = currentRoute == tab.route,
    onClick = { navController.navigate(tab.route) },
    icon = { Icon(tab.icon, contentDescription = tab.label) },
    label = { Text(tab.label) }
)

Avoiding Back Stack Buildup

Tapping tabs repeatedly should not pile up destinations. Use popUpTo the start destination plus launchSingleTop when navigating between tabs.

navController.navigate(tab.route) {
    popUpTo(navController.graph.startDestinationId) { saveState = true }
    launchSingleTop = true
    restoreState = true
}

saveState / restoreState

saveState and restoreState preserve each tab's scroll position and state when you switch away and back — the expected behavior for bottom tabs.

Scaffold Integration

Wrap everything in a Scaffold. Put the bar in bottomBar and the NavHost in the content, using the provided padding so content is not hidden behind the bar.

Scaffold(
    bottomBar = { BottomBar(navController) }
) { padding ->
    NavHost(
        navController,
        startDestination = "home",
        modifier = Modifier.padding(padding)
    ) { /* destinations */ }
}

Looping the Items

Build the bar by iterating your tab list, which keeps the code short and consistent.

NavigationBar {
    tabs.forEach { tab ->
        NavigationBarItem(
            selected = currentRoute == tab.route,
            onClick = { navController.navigate(tab.route) },
            icon = { Icon(tab.icon, contentDescription = tab.label) },
            label = { Text(tab.label) }
        )
    }
}

Putting It Together

Full bottom bar wired to a controller, highlighting the active tab.

@Composable
fun BottomBar(navController: NavController) {
    val entry by navController.currentBackStackEntryAsState()
    val current = entry?.destination?.route
    NavigationBar {
        tabs.forEach { tab ->
            NavigationBarItem(
                selected = current == tab.route,
                onClick = { navController.navigate(tab.route) },
                icon = { Icon(tab.icon, contentDescription = tab.label) },
                label = { Text(tab.label) }
            )
        }
    }
}

Quick Check

How do you know which NavigationBarItem to mark as selected?

Recap

Bottom navigation:

NavigationBar holds NavigationBarItems.
Track the active tab via currentBackStackEntryAsState() and set selected.
Use popUpTo + launchSingleTop + saveState/restoreState for clean tab switching.
Host it in a Scaffold bottomBar.

Frequently asked questions

Is the “Bottom Navigation” lesson free?

Yes — the full text of “Bottom Navigation” is free to read here on the web, and the Android 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 Android Academy course, upgrade to CoddyKit PRO.

What will I learn in “Bottom Navigation”?

Build tabbed bottom navigation. You practise Android 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 Android Academy?

No prior experience is required. Android Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Bottom Navigation” 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 Android Academy lesson?

Yes. Every Android 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

← Back to Android Academy