Android Academy · Lesson

Bottom Navigation

Build tabbed bottom navigation.

Lesson 4 of 413 steps

Bottom Navigation is a free Android Academy lesson on CoddyKit. This is lesson 4 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Android Academy learning path, and your progress syncs across the web and the CoddyKit app. The Android Academy course includes 4 lessons in total.

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?

Answer it in the interactive lesson

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.

Free to start

Learn Kotlin with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 36
Lessons: 152

Start learning free View the full course

Frequently Asked Questions

Is the “Bottom Navigation” lesson free?

Yes — any 3 lessons of the Android Academy learning path, including “Bottom Navigation”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Android Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.

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