Bottom navigation bar in Android Kotlin - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Bottom Navigation Bar Item Selection Behavior

What will happen when the user taps the second item in this BottomNavigationView setup?

Android Kotlin

val bottomNavigationView = findViewById<BottomNavigationView>(R.id.bottom_navigation)
bottomNavigationView.setOnItemSelectedListener { item ->
  when(item.itemId) {
    R.id.home -> {
      showHomeFragment()
      true
    }
    R.id.search -> {
      showSearchFragment()
      true
    }
    R.id.profile -> {
      showProfileFragment()
      true
    }
    else -> false
  }
}

A The app will display the Search fragment and highlight the Search icon in the bottom bar.

B The app will display the Home fragment and highlight the Home icon in the bottom bar.

C The app will crash because the listener does not handle the second item.

D Nothing will happen because the listener returns false for the second item.

💡 Hint

Look at the itemId checked in the when block and what fragment is shown for R.id.search.

The listener checks the itemId and calls showSearchFragment() when the second item (R.id.search) is selected, returning true to indicate the event was handled. This updates the UI and highlights the Search icon.

❓ lifecycle

intermediate

State Preservation in Bottom Navigation

In an app with a BottomNavigationView switching between fragments, what is the best way to preserve each fragment's state when switching tabs?

A Use finish() on the activity when switching tabs to reset state.

B Use add() and show()/hide() methods to keep fragments alive and preserve their state.

C Create new fragment instances every time the tab is selected.

D Replace the fragment each time without adding to back stack, losing previous state.

💡 Hint

Think about how to keep fragments in memory without recreating them.

Using add() and show()/hide() keeps fragments alive in the FragmentManager, preserving their UI and data state when switching tabs.

❓ navigation

advanced

Navigation Component with Bottom Navigation Bar

Given a BottomNavigationView integrated with Navigation Component, what is the effect of calling NavigationUI.setupWithNavController(bottomNavigationView, navController)?

A It causes the app to crash if the navController is null.

B It disables the bottom navigation bar until manually enabled.

C It automatically updates the selected item in the bottom bar when navigating and handles item clicks to navigate.

D It only changes the toolbar title but does not affect navigation.

💡 Hint

Think about how NavigationUI connects UI components with navigation actions.

setupWithNavController links the BottomNavigationView with the NavController so that selecting items triggers navigation and the selected item updates automatically.

📝 Syntax

advanced

Correct Kotlin Syntax for BottomNavigationView Listener

Which option shows the correct Kotlin syntax to set a listener on BottomNavigationView that returns true when an item is selected?

A bottomNavigationView.setOnItemSelectedListener { item -> when(item.itemId) { R.id.home -> true else -> false } }

B bottomNavigationView.setOnItemSelectedListener(fun(item) { return true })

C bottomNavigationView.setOnItemSelectedListener { item -> { true } }

D bottomNavigationView.setOnItemSelectedListener { item -> if (item.itemId == R.id.home) true else false }

💡 Hint

Remember the lambda syntax and that the listener expects a Boolean return.

Option A uses a lambda with a when expression returning Boolean correctly. Option A uses invalid syntax. Option A is valid Kotlin but less idiomatic than C. Option A returns a lambda instead of Boolean.

🔧 Debug

expert

Debugging BottomNavigationView Item Highlight Issue

An app's BottomNavigationView does not highlight the selected item after tapping. Which code mistake causes this?

Android Kotlin

bottomNavigationView.setOnItemSelectedListener { item ->
  when(item.itemId) {
    R.id.home -> {
      showHomeFragment()
      false
    }
    R.id.search -> {
      showSearchFragment()
      false
    }
    else -> false
  }
}

A Not calling notifyDataSetChanged() on the BottomNavigationView adapter.

B Using showHomeFragment() instead of replaceFragment() causes UI not to update.

C Missing call to bottomNavigationView.invalidate() after selection.

D Returning false in the listener prevents the item from being highlighted as selected.

💡 Hint

Check what the listener's return value controls in BottomNavigationView.

Returning false means the event was not handled, so the BottomNavigationView does not update the selected item highlight.

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