Bottom navigation bar in Android Kotlin - Deep Dive

Overview - Bottom navigation bar

What is it?

A bottom navigation bar is a user interface element placed at the bottom of a mobile screen. It allows users to quickly switch between different main sections of an app by tapping icons or labels. This bar usually shows 3 to 5 navigation items and stays visible across screens for easy access.

Why it matters

Without a bottom navigation bar, users might get lost or take longer to find important parts of an app. It improves app usability by providing a clear, consistent way to move around. This helps users feel confident and reduces frustration, making the app more enjoyable and efficient to use.

Where it fits

Before learning about bottom navigation bars, you should understand basic Android UI components and layouts. After mastering it, you can explore advanced navigation patterns like navigation drawers, tabs, and deep linking to build more complex app flows.

Mental Model

Core Idea

A bottom navigation bar is a fixed menu at the screen bottom that lets users switch main app sections with one tap.

Think of it like...

It's like the tabs on a file folder organizer on your desk, where each tab quickly shows a different set of papers without mixing them up.

┌─────────────────────────────┐
│                             │
│         App Content          │
│                             │
├────────┬────────┬───────────┤
│ Home   │ Search │ Profile   │
│  🏠    │  🔍    │   👤      │
└────────┴────────┴───────────┘

Build-Up - 6 Steps

1

Foundation

What is a Bottom Navigation Bar

Concept: Introduce the basic idea and purpose of a bottom navigation bar in mobile apps.

A bottom navigation bar is a horizontal bar at the bottom of the screen. It contains icons and labels for main app sections. Users tap these to switch views quickly. It stays visible on most screens for easy access.

Result

You understand the role of the bottom navigation bar as a simple menu for main app areas.

Knowing this helps you see why it improves app navigation and user experience.

2

Foundation

Basic Android Setup for Bottom Navigation

Concept: Learn how to add a bottom navigation bar in an Android app using XML layout and Kotlin.

In your activity_main.xml, add a inside a CoordinatorLayout or ConstraintLayout. Define menu items in a separate XML file under res/menu. In MainActivity.kt, set up a listener to respond when users tap items.

Result

Your app shows a bottom navigation bar with clickable icons at the screen bottom.

Understanding the XML and Kotlin setup is key to customizing and controlling the bar.

3

Intermediate

Handling Navigation Item Selection

🤔Before reading on: do you think tapping a navigation item automatically changes the screen, or do you need to write code to handle it? Commit to your answer.

Concept: Learn how to respond to user taps on navigation items to switch app content.

Use setOnItemSelectedListener on BottomNavigationView in Kotlin. Inside the listener, check which item was tapped by its ID. Then replace the main content fragment or update the UI accordingly. This manual handling lets you control what happens on each tap.

Result

Tapping a bottom navigation item changes the visible screen content as expected.

Knowing you must handle taps explicitly prevents confusion about why navigation might not work automatically.

4

Intermediate

Using Fragments with Bottom Navigation

🤔Before reading on: do you think each navigation item should load a new activity or a fragment? Commit to your answer.

Concept: Learn to use fragments to swap content inside one activity when navigation items are selected.

Create separate fragment classes for each main section. In the item selection listener, replace the fragment container with the selected fragment using supportFragmentManager.beginTransaction().replace().commit(). This keeps the app smooth and efficient.

Result

The app switches between different fragments inside the same activity when users tap navigation items.

Understanding fragments helps you build apps that feel fast and keep state without restarting activities.

5

Advanced

Maintaining Navigation State on Rotation

🤔Before reading on: do you think the selected navigation item stays the same after device rotation automatically? Commit to your answer.

Concept: Learn how to save and restore the selected navigation item to keep UI consistent across device rotations.

Override onSaveInstanceState in your activity to save the selected item ID. In onCreate, check savedInstanceState and restore the selected item and fragment. This prevents the app from resetting to the default screen after rotation.

Result

The app remembers which navigation item was selected even after rotating the device.

Knowing how to preserve state avoids frustrating user experiences and keeps navigation smooth.

6

Expert

Integrating Bottom Navigation with Navigation Component

🤔Before reading on: do you think the Android Navigation Component can manage bottom navigation automatically or do you have to write all fragment transactions manually? Commit to your answer.

Concept: Learn how to use Android's Navigation Component to simplify bottom navigation setup and handle back stack automatically.

Define a navigation graph XML with destinations for each fragment. In your activity, use NavigationUI.setupWithNavController() to link BottomNavigationView with NavController. This manages fragment transactions, back stack, and deep linking with less code.

Result

Your app has a bottom navigation bar fully integrated with Navigation Component, handling navigation and back stack automatically.

Understanding this modern approach reduces boilerplate and prevents common navigation bugs in production apps.

Under the Hood

The BottomNavigationView is a specialized view that displays menu items horizontally. When a user taps an item, it triggers a callback. Developers handle this callback to swap fragments or update UI. Internally, fragment transactions replace the visible content without restarting the activity. The Navigation Component adds a NavController that manages navigation state and back stack automatically.

Why designed this way?

Bottom navigation bars were designed to provide quick access to top-level destinations without cluttering the screen. Placing it at the bottom fits natural thumb reach on phones. Using fragments instead of activities allows faster transitions and better state management. The Navigation Component was introduced to simplify complex navigation logic and reduce errors.

┌─────────────────────────────┐
│       BottomNavigationView   │
│ ┌─────┐ ┌─────┐ ┌─────┐     │
│ │Item1│ │Item2│ │Item3│     │
│ └─────┘ └─────┘ └─────┘     │
└─────────┬─────────┬─────────┘
          │         │
          ▼         ▼
   ┌───────────┐ ┌───────────┐
   │Fragment 1 │ │Fragment 2 │
   └───────────┘ └───────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does the bottom navigation bar automatically handle screen changes when you tap items? Commit to yes or no.

Common Belief: The bottom navigation bar automatically switches screens when an item is tapped without extra code.

Reality: You must write code to handle item selection and update the UI or fragments accordingly.

Why it matters: Assuming automatic behavior leads to apps where taps do nothing, confusing users and causing bugs.

Quick: Can you have more than 5 items in a bottom navigation bar? Commit to yes or no.

Common Belief: You can add as many items as you want to the bottom navigation bar.

Reality: Material Design guidelines recommend 3 to 5 items; more causes clutter and poor usability.

Why it matters: Ignoring this leads to cramped UI and harder navigation, frustrating users.

Quick: Does rotating the device keep the selected bottom navigation item by default? Commit to yes or no.

Common Belief: The selected navigation item stays the same automatically after device rotation.

Reality: Without saving and restoring state, the selected item resets to default on rotation.

Why it matters: Not preserving state causes jarring user experience and loss of context.

Quick: Is it better to use separate activities for each bottom navigation item? Commit to yes or no.

Common Belief: Each bottom navigation item should open a new activity for better separation.

Reality: Using fragments inside one activity is preferred for smooth transitions and shared UI elements.

Why it matters: Using activities can cause slow navigation and complex back stack management.

Expert Zone

1

The Navigation Component's handling of back stack with bottom navigation differs from manual fragment transactions and avoids common bugs with back button behavior.

2

Customizing the bottom navigation bar's appearance requires understanding Material Design theming and state lists for icon and text colors.

3

Handling deep links with bottom navigation requires careful setup of navigation graphs and intent filters to maintain correct navigation state.

When NOT to use

Bottom navigation bars are not suitable for apps with many top-level destinations or complex hierarchical navigation. In such cases, use navigation drawers or tabs instead. Also, avoid bottom navigation for apps where screen space is very limited or where gestures provide better navigation.

Production Patterns

In production, bottom navigation is often combined with the Navigation Component for clean code and reliable back stack. Developers use ViewModels to share data between fragments and handle state restoration. Animations and badges on navigation items improve user feedback. Accessibility is enhanced by proper content descriptions and focus management.

Connections

Tab Bar (iOS)

Equivalent UI pattern on iOS platforms

Understanding bottom navigation helps grasp iOS tab bars, as both provide quick access to main app sections with similar user expectations.

State Management

Builds-on managing UI state across navigation changes

Knowing how to save and restore navigation state connects to broader concepts of state management in mobile apps, improving app reliability.

Human-Computer Interaction (HCI)

Builds-on principles of usability and ergonomics

Bottom navigation design reflects HCI principles like thumb reach and cognitive load, showing how design impacts user comfort and efficiency.

Common Pitfalls

#1 Navigation items do not respond when tapped.

Wrong approach:

bottomNavigationView.setOnItemSelectedListener(null)

Correct approach:

bottomNavigationView.setOnItemSelectedListener { item -> /* handle selection */ true }

Root cause:

Not setting a listener means taps have no effect, so the app does not respond to user input.

#2 App resets to the first tab after device rotation.

Wrong approach:

Ignoring savedInstanceState and always loading default fragment in onCreate.

Correct approach:

Save selected item ID in onSaveInstanceState and restore it in onCreate before setting fragment.

Root cause:

Not preserving UI state causes loss of user context on configuration changes.

#3 Using activities instead of fragments for each navigation item.

Wrong approach:

Starting new activities on navigation item selection instead of swapping fragments.

Correct approach:

Replace fragments inside a single activity to keep navigation smooth and shared UI consistent.

Root cause:

Misunderstanding Android navigation best practices leads to inefficient and complex app behavior.

Key Takeaways

A bottom navigation bar provides quick, consistent access to main app sections at the screen bottom.

You must handle item selection in code to update the UI or fragments when users tap navigation items.

Using fragments inside one activity is the preferred way to switch content smoothly with bottom navigation.

Preserving the selected navigation state across device rotations is essential for a good user experience.

Integrating with Android's Navigation Component simplifies navigation logic and back stack management in production apps.