Bottom navigation bar in Android Kotlin - Mini App: Build & Ship

Build: MainScreen

A screen with a bottom navigation bar to switch between Home, Search, and Profile sections.

Target UI

┌─────────────────────────────┐
│          MainScreen         │
│                             │
│        [Content Area]        │
│                             │
│-----------------------------│
│ Home | Search | Profile     │
└─────────────────────────────┘

Add a BottomNavigationView with three items: Home, Search, Profile

Switch displayed text in the content area based on selected item

Highlight the selected item in the bottom navigation bar

Starter Code

Android Kotlin

package com.example.bottomnav

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.bottomnavigation.BottomNavigationView
import android.widget.TextView

class MainScreen : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main_screen)

        val bottomNav = findViewById<BottomNavigationView>(R.id.bottom_navigation)
        val contentText = findViewById<TextView>(R.id.content_text)

        // TODO: Add bottom navigation item selection handling here
    }
}

Task 1

Task 2

Task 3

Solution

Android Kotlin

package com.example.bottomnav

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.bottomnavigation.BottomNavigationView
import android.widget.TextView

class MainScreen : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main_screen)

        val bottomNav = findViewById<BottomNavigationView>(R.id.bottom_navigation)
        val contentText = findViewById<TextView>(R.id.content_text)

        bottomNav.setOnItemSelectedListener { item ->
            when (item.itemId) {
                R.id.nav_home -> {
                    contentText.text = "Home Screen"
                    true
                }
                R.id.nav_search -> {
                    contentText.text = "Search Screen"
                    true
                }
                R.id.nav_profile -> {
                    contentText.text = "Profile Screen"
                    true
                }
                else -> false
            }
        }

        // Set default selection
        bottomNav.selectedItemId = R.id.nav_home
    }
}

We added a listener to the BottomNavigationView to detect when the user taps an item. Inside the listener, we check which item was selected using when. We update the TextView to show the corresponding screen name. Returning true means we handled the tap. We also set the default selected item to Home so the screen shows "Home Screen" initially.

Final Result

Completed Screen

┌─────────────────────────────┐
│          MainScreen         │
│                             │
│        Home Screen           │
│                             │
│-----------------------------│
│ Home* | Search | Profile    │
└─────────────────────────────┘

Tapping 'Search' changes content text to 'Search Screen' and highlights Search icon

Tapping 'Profile' changes content text to 'Profile Screen' and highlights Profile icon

Tapping 'Home' returns content text to 'Home Screen' and highlights Home icon

Stretch Goal

Add icons to each bottom navigation item for better visual clarity

💡 Hint

Use vector drawable icons and set them in the menu resource file for BottomNavigationView