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.

Practice

1. What is the main purpose of a BottomNavigationView in an Android app?

easy

A. To let users switch between main sections of the app easily

B. To display a list of notifications

C. To show a full-screen image gallery

D. To handle background tasks

Solution

1. Step 1: Understand BottomNavigationView role

   The BottomNavigationView is designed to provide quick navigation between top-level views in an app.

2. Step 2: Compare options with its purpose

   Options B, C, and D describe unrelated features like notifications, image galleries, or background tasks.

3. Final Answer:

   To let users switch between main sections of the app easily -> Option A

4. Quick Check:

   BottomNavigationView = Easy app section switching [OK]

Hint: BottomNavigationView is for main app section navigation [OK]

Common Mistakes:

• Confusing BottomNavigationView with notification or image display
• Thinking it handles background processes
• Assuming it is a full-screen component

2. Which of the following is the correct way to set a listener for item selection on a BottomNavigationView in Kotlin?

easy

A. bottomNav.setOnClickListener { item -> true }

B. bottomNav.setOnItemSelectedListener { item -> true }

C. bottomNav.setOnItemClickListener { item -> true }

D. bottomNav.setOnItemSelected { item -> true }

Solution

1. Step 1: Recall BottomNavigationView listener method

   The correct method to listen for item selection is setOnItemSelectedListener.

2. Step 2: Check method names in options

   Options A, C, and D use incorrect method names not defined for BottomNavigationView.

3. Final Answer:

   bottomNav.setOnItemSelectedListener { item -> true } -> Option B

4. Quick Check:

   Listener method = setOnItemSelectedListener [OK]

Hint: Use setOnItemSelectedListener for BottomNavigationView [OK]

Common Mistakes:

• Using setOnClickListener instead of setOnItemSelectedListener
• Confusing with setOnItemClickListener (not valid here)
• Misspelling the listener method name

3. Given this Kotlin code snippet for a BottomNavigationView listener:

bottomNav.setOnItemSelectedListener { item ->
  when(item.itemId) {
    R.id.home -> { showHome(); true }
    R.id.search -> { showSearch(); true }
    else -> false
  }
}

What happens when the user taps the "search" item?

medium

A. The app crashes due to missing case

B. The showHome() function is called instead

C. Nothing happens because the listener returns false

D. The showSearch() function is called and the tap is handled

Solution

1. Step 1: Analyze the when block for itemId

   When the itemId is R.id.search, the code calls showSearch() and returns true.

2. Step 2: Understand return value meaning

   Returning true means the tap event is handled properly, so showSearch() runs.

3. Final Answer:

   The showSearch() function is called and the tap is handled -> Option D

4. Quick Check:

   ItemId search triggers showSearch() [OK]

Hint: Return true after handling item to confirm tap handled [OK]

Common Mistakes:

• Assuming else case runs for known items
• Thinking returning false still triggers action
• Confusing itemId values

4. What is wrong with this Kotlin code for BottomNavigationView listener?

bottomNav.setOnItemSelectedListener { item ->
  when(item.itemId) {
    R.id.home -> showHome()
    R.id.profile -> showProfile()
  }
}

medium

A. The listener should be set with setOnClickListener instead

B. Using when instead of if-else is incorrect here

C. Missing return value for the lambda, causing a type mismatch error

D. The itemId values are invalid identifiers

Solution

1. Step 1: Check lambda return type requirement

   The listener expects a Boolean return indicating if the tap was handled.

2. Step 2: Identify missing return statements

   The when cases call functions but do not return true or false, causing a type mismatch.

3. Final Answer:

   Missing return value for the lambda, causing a type mismatch error -> Option C

4. Quick Check:

   Listener lambda must return Boolean [OK]

Hint: Always return true or false in setOnItemSelectedListener lambda [OK]

Common Mistakes:

• Forgetting to return true after handling item
• Using setOnClickListener instead of setOnItemSelectedListener
• Ignoring compiler errors about return type

5. You want to create a BottomNavigationView with 4 items: Home, Search, Profile, and Settings. Which practice should you follow to ensure best usability?

hard

A. Use exactly 4 items and provide clear icons and labels for each

B. Add 6 items to show more options at once

C. Use only icons without labels to save space

D. Place the BottomNavigationView at the top of the screen

Solution

1. Step 1: Recall BottomNavigationView usability guidelines

   Best practice is to have between 3 and 5 items with clear icons and labels.

2. Step 2: Evaluate options against guidelines

   Add 6 items to show more options at once exceeds recommended items; C removes labels which hurts clarity; D places it incorrectly at top.

3. Final Answer:

   Use exactly 4 items and provide clear icons and labels for each -> Option A

4. Quick Check:

   3-5 items with icons and labels = best practice [OK]

Hint: Keep 3-5 items with icons and labels for BottomNavigationView [OK]

Common Mistakes:

• Adding too many items causing clutter
• Removing labels making navigation unclear
• Placing BottomNavigationView at top instead of bottom