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.