Bottom navigation bar in Android Kotlin - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a BottomNavigationView in the layout XML.

Android Kotlin

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/[1]"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    app:menu="@menu/bottom_nav_menu" />

Drag options to blanks, or click blank then click option'

Abottom_nav

Bnav_view

CbottomNavigation

DnavigationBar

Attempts:

3 left

💡 Hint

Common Mistakes

Using an id that does not match the Kotlin code reference.

Forgetting the '@+id/' prefix.

The BottomNavigationView is usually given an id like 'nav_view' to reference it in Kotlin code.

2fill in blank

medium

Complete the Kotlin code to find the BottomNavigationView by its id.

Android Kotlin

val bottomNavigationView = findViewById<BottomNavigationView>(R.id.[1])

Drag options to blanks, or click blank then click option'

Anav_view

BbottomNavigation

Cbottom_nav

DnavigationBar

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different id than the one declared in XML.

Forgetting to import BottomNavigationView.

The id used in XML is 'nav_view', so we use R.id.nav_view to find it in Kotlin.

3fill in blank

hard

Fix the error in the listener setup to handle item selection on the BottomNavigationView.

Android Kotlin

bottomNavigationView.setOnItemSelectedListener { item ->
    when (item.itemId) {
        R.id.navigation_home -> {
            // Handle home action
            true
        }
        R.id.navigation_dashboard -> {
            // Handle dashboard action
            [1]
        }
        else -> false
    }
}

Drag options to blanks, or click blank then click option'

Afalse

Bnull

Ctrue

DUnit

Attempts:

3 left

💡 Hint

Common Mistakes

Returning false causes the item not to be selected.

Returning null or Unit causes compilation errors.

The listener must return true to indicate the event was handled.

4fill in blank

hard

Fill both blanks to correctly inflate the menu and set the listener for the BottomNavigationView.

Android Kotlin

bottomNavigationView.[1](R.menu.bottom_nav_menu)
bottomNavigationView.[2] { item ->
    // Handle item selection
    true
}

Drag options to blanks, or click blank then click option'

AinflateMenu

BsetOnItemSelectedListener

CsetMenu

DsetOnClickListener

Attempts:

3 left

💡 Hint

Common Mistakes

Using setMenu instead of inflateMenu.

Using setOnClickListener instead of setOnItemSelectedListener.

inflateMenu loads the menu resource; setOnItemSelectedListener sets the item selection handler.

5fill in blank

hard

Fill all three blanks to create a BottomNavigationView listener that switches fragments based on selected item.

Android Kotlin

bottomNavigationView.setOnItemSelectedListener { item ->
    val fragment = when (item.itemId) {
        R.id.navigation_home -> [1]
        R.id.navigation_dashboard -> [2]
        else -> [3]
    }
    supportFragmentManager.beginTransaction().replace(R.id.fragment_container, fragment).commit()
    true
}

Drag options to blanks, or click blank then click option'

AHomeFragment()

BDashboardFragment()

CProfileFragment()

DSettingsFragment()

Attempts:

3 left

💡 Hint

Common Mistakes

Using fragment classes without parentheses (missing constructor call).

Not returning true after handling the selection.

Each menu item corresponds to a fragment instance to display.