Navigating between composables in Android Kotlin - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ navigation

intermediate

What is the output when navigating between two composables?

Consider two composables: HomeScreen and DetailScreen. When a button in HomeScreen is clicked, the app navigates to DetailScreen. What will be displayed after clicking the button?

Android Kotlin

import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.navigation.compose.*

@Composable
fun AppNavHost() {
  val navController = rememberNavController()
  NavHost(navController, startDestination = "home") {
    composable("home") {
      Button(onClick = { navController.navigate("detail") }) {
        Text("Go to Detail")
      }
    }
    composable("detail") {
      Text("Detail Screen")
    }
  }
}

A The screen shows a button labeled 'Go to Detail'. After clicking, it shows text 'Detail Screen'.

B The app crashes because navigation is not set up correctly.

C The screen shows text 'Detail Screen' initially and a button after clicking.

D Nothing changes on the screen after clicking the button.

💡 Hint

Think about what composable is shown at the start and what happens on button click.

Initially, the HomeScreen composable shows a button labeled 'Go to Detail'. When clicked, navController navigates to 'detail' route, showing the DetailScreen composable with text 'Detail Screen'.

❓ ui_behavior

intermediate

What happens if you navigate to the same composable multiple times?

In a Jetpack Compose app, if you navigate repeatedly to the same composable route without popping the back stack, what is the expected behavior?

Android Kotlin

val navController = rememberNavController()

Button(onClick = { navController.navigate("profile") }) {
  Text("Go to Profile")
}

// Assume 'profile' composable is defined in NavHost

A The back stack is cleared and only one 'profile' composable remains.

B Navigation to the same composable is ignored after the first time.

C The app crashes due to duplicate composable routes.

D Each navigation adds a new instance of the 'profile' composable to the back stack.

💡 Hint

Think about how navigation back stack works in Jetpack Compose.

Each call to navigate adds a new entry to the back stack, so multiple instances of the same composable route can exist.

❓ lifecycle

advanced

Which lifecycle event occurs when navigating away from a composable?

When navigating from Composable A to Composable B using Jetpack Compose Navigation, which lifecycle event is triggered for Composable A?

A Composable A remains active and no lifecycle event occurs.

B Composable A's onCreate is called again.

C Composable A's DisposableEffect's onDispose is called.

D Composable A's onStart is called.

💡 Hint

Think about how Compose handles cleanup when a composable leaves the screen.

When a composable leaves the composition due to navigation, DisposableEffect's onDispose callback is triggered to clean up resources.

📝 Syntax

advanced

Which code snippet correctly passes an argument during navigation?

You want to navigate to a composable named 'detail' and pass a userId as an argument. Which code snippet correctly performs this navigation?

A navController.navigate("detail?userId=$userId")

B navController.navigate("detail/$userId")

C navController.navigate("detail", bundleOf("userId" to userId))

D navController.navigate("detail", arguments = mapOf("userId" to userId))

💡 Hint

Think about how Jetpack Compose Navigation encodes arguments in routes.

In Jetpack Compose Navigation, arguments are passed as part of the route string using placeholders like 'detail/{userId}'. So navigating with 'detail/$userId' is correct.

🔧 Debug

expert

Why does this navigation code cause a crash?

Given the code below, why does the app crash when navigating to 'profile'?

Android Kotlin

NavHost(navController, startDestination = "home") {
  composable("home") { HomeScreen(navController) }
  composable("profile/{userId}") { backStackEntry ->
    val userId = backStackEntry.arguments?.getString("userId")!!
    ProfileScreen(userId)
  }
}

// Navigation call:
navController.navigate("profile")

A Navigation fails because the required 'userId' argument is missing in the route.

B The composable 'profile/{userId}' is not registered correctly.

C The NavHost startDestination is invalid.

D The backStackEntry is null causing a NullPointerException.

💡 Hint

Check if all required arguments are provided when navigating.

The 'profile/{userId}' route requires a userId argument. Navigating with 'profile' without userId causes a crash due to missing argument.

Practice

1. What is the main purpose of NavController in Jetpack Compose navigation?

easy

A. To create UI elements inside a composable

B. To handle database operations

C. To manage navigation between composable screens

D. To style composables with themes

Solution

1. Step 1: Understand the role of NavController

   NavController is responsible for controlling navigation actions between composables in an app.

2. Step 2: Differentiate from other components

   It does not create UI elements, handle databases, or style components; those are handled by other parts of Compose or Android.

3. Final Answer:

   To manage navigation between composable screens -> Option C

4. Quick Check:

   NavController manages navigation [OK]

Hint: NavController controls screen changes in Compose [OK]

Common Mistakes:

• Confusing NavController with UI creation
• Thinking NavController handles data or styling
• Mixing NavController with ViewModel

2. Which of the following is the correct syntax to navigate to a composable with route "profile" using NavController named navController?

easy

A. navController.navigate("profile")

B. navController.goTo("profile")

C. navController.move("profile")

D. navController.open("profile")

Solution

1. Step 1: Recall the navigation method

   The correct method to navigate is navigate() on NavController.

2. Step 2: Check method names

   Only navigate() is valid; others like goTo(), move(), or open() do not exist.

3. Final Answer:

   navController.navigate("profile") -> Option A

4. Quick Check:

   Use navigate() to change screens [OK]

Hint: Use navigate() method on NavController [OK]

Common Mistakes:

• Using non-existent methods like goTo or move
• Forgetting to pass route as a string
• Calling navigation on wrong object

3. Given this code snippet inside a composable:

val navController = rememberNavController()
Button(onClick = { navController.navigate("details") }) {
  Text("Go to Details")
}

What happens when the button is clicked?

medium

A. The app navigates to the composable with route "details"

B. The app closes immediately

C. Nothing happens because navigate() is incorrect

D. The app crashes due to missing NavHost

Solution

1. Step 1: Understand the button's onClick action

   The button calls navController.navigate("details") which triggers navigation to the "details" route.

2. Step 2: Consider NavHost presence

   Assuming NavHost is set up correctly with "details" route, navigation will succeed and show that screen.

3. Final Answer:

   The app navigates to the composable with route "details" -> Option A

4. Quick Check:

   Button triggers navigate() to details [OK]

Hint: Button click calls navigate() to change screen [OK]

Common Mistakes:

• Assuming navigate() does nothing
• Confusing navigation with app closing
• Ignoring NavHost setup requirement

4. Consider this code snippet:

navController.navigate("home")
navController.popBackStack()

What is the likely problem here?

medium

A. popBackStack() is not a valid NavController method

B. Calling popBackStack() immediately after navigate() may prevent navigation

C. navigate() requires a NavHost to be null

D. No problem; this code navigates then goes back correctly

Solution

1. Step 1: Analyze the sequence of calls

   Calling navigate("home") pushes a new screen, but immediately calling popBackStack() removes the top screen.

2. Step 2: Understand effect on navigation

   This means the navigation to "home" is undone immediately, so user may not see the new screen.

3. Final Answer:

   Calling popBackStack() immediately after navigate() may prevent navigation -> Option B

4. Quick Check:

   popBackStack() right after navigate() cancels navigation [OK]

Hint: Don't popBackStack() right after navigate() [OK]

Common Mistakes:

• Thinking popBackStack() is invalid
• Assuming navigation always succeeds despite popBackStack()
• Ignoring call order effects

5. You want to navigate from a composable "list" to "details/{itemId}" passing an item ID as argument. Which code correctly navigates to details screen with itemId = 42?

hard

A. navController.navigate("details/{itemId}")

B. navController.navigate("details")

C. navController.navigate("details?itemId=42")

D. navController.navigate("details/42")

Solution

1. Step 1: Understand route parameter usage

   When route has a placeholder like "details/{itemId}", you replace {itemId} with actual value in the route string.

2. Step 2: Check each option

   navController.navigate("details/42") correctly replaces {itemId} with 42. navController.navigate("details") misses the parameter. navController.navigate("details?itemId=42") uses query syntax which is not standard here. navController.navigate("details/{itemId}") uses the placeholder literally, which won't work.

3. Final Answer:

   navController.navigate("details/42") -> Option D

4. Quick Check:

   Replace {itemId} with actual value in route [OK]

Hint: Replace placeholders with actual values in route string [OK]

Common Mistakes:

• Passing route with placeholder instead of value
• Using query parameters incorrectly
• Omitting required route arguments