0
0
Android Kotlinmobile~20 mins

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

Choose your learning style9 modes available
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