NavHost and NavController in Android Kotlin - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a NavHost in a Compose UI.

Android Kotlin

NavHost(navController = [1], startDestination = "home") {
    composable("home") { HomeScreen() }
}

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

AnavController

BrememberNavController()

CNavController()

DNavHostController()

Attempts:

3 left

💡 Hint

Common Mistakes

Using NavController() directly causes errors because it needs to be remembered.

Using undefined variables like navController without initialization.

The rememberNavController() function creates and remembers a NavController instance for navigation.

2fill in blank

medium

Complete the code to navigate to the "details" screen using NavController.

Android Kotlin

navController.[1]("details")

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

AgoTo

Bmove

Cnavigate

DswitchTo

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent functions like goTo or move causes compile errors.

Confusing navigation with fragment transactions.

The navigate() function is used to move to a different destination in the navigation graph.

3fill in blank

hard

Fix the error in the code to get the current back stack entry from NavController.

Android Kotlin

val currentBackStackEntry = navController.[1]

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

AcurrentBackStackEntryAsState

BcurrentBackStackEntryAsState()

CcurrentBackStackEntry

DgetCurrentBackStackEntry()

Attempts:

3 left

💡 Hint

Common Mistakes

Using parentheses makes it a function call which does not exist.

Using the property without 'AsState' does not provide Compose state.

The property currentBackStackEntryAsState provides a state object to observe the current back stack entry in Compose.

4fill in blank

hard

Fill both blanks to define a composable destination with a route and content.

Android Kotlin

NavHost(navController, startDestination = "home") {
    composable(route = [1]) { [2] }
}

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

A"home"

BHomeScreen()

C"details"

DDetailsScreen()

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing route strings and composable calls.

Forgetting quotes around route strings.

The route string must match the destination name, and the composable content is the screen function.

5fill in blank

hard

Fill all three blanks to create a NavHost with a remembered NavController and navigate to "profile" on button click.

Android Kotlin

val navController = [1]()

NavHost(navController = navController, startDestination = "home") {
    composable("home") {
        Button(onClick = { navController.[2]("profile") }) {
            Text(text = [3])
        }
    }
    composable("profile") { ProfileScreen() }
}

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

ArememberNavController

Bnavigate

C"Go to Profile"

DnavigateTo

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong function names like navigateTo or missing parentheses.

Forgetting quotes around button text.

Use rememberNavController() to create the controller, navigate() to move screens, and a string for button text.

Practice

1. What is the main role of NavHost in Android navigation?

easy

A. It displays the current screen inside a container.

B. It handles network requests between screens.

C. It stores user data for the app.

D. It manages background services.

Solution

1. Step 1: Understand NavHost purpose

   NavHost is a container that shows the current screen (fragment) in your app.

2. Step 2: Compare options

   Only It displays the current screen inside a container. correctly describes NavHost's role as a screen container.

3. Final Answer:

   It displays the current screen inside a container. -> Option A

4. Quick Check:

   NavHost = Screen container [OK]

Hint: NavHost is like a window showing your current screen [OK]

Common Mistakes:

• Confusing NavHost with NavController
• Thinking NavHost manages data or services
• Assuming NavHost handles navigation logic

2. Which of the following is the correct way to get a NavController inside a Fragment?

easy

A. val navController = getNavHost()

B. val navController = NavController()

C. val navController = findNavController()

D. val navController = NavigationHost()

Solution

1. Step 1: Recall NavController retrieval method

   In a Fragment, the standard way is to call findNavController() extension function.

2. Step 2: Check other options

   The other options are invalid or do not exist in Android navigation API.

3. Final Answer:

   val navController = findNavController() -> Option C

4. Quick Check:

   Use findNavController() in Fragment [OK]

Hint: Use findNavController() to get NavController in Fragment [OK]

Common Mistakes:

• Trying to instantiate NavController directly
• Using wrong method names like getNavHost()
• Confusing NavHost with NavController

3. Given this code inside a Fragment:

findNavController().navigate(R.id.action_home_to_detail)

What happens when this code runs?

medium

A. The app restarts the Home screen.

B. The app navigates from Home screen to Detail screen.

C. The app closes the current screen.

D. The app shows an error because navigate() needs a string.

Solution

1. Step 1: Understand navigate() usage

   The navigate() method moves the app to the destination defined by the action ID.

2. Step 2: Interpret the action ID

   R.id.action_home_to_detail is an action from Home to Detail screen in navigation graph.

3. Final Answer:

   The app navigates from Home screen to Detail screen. -> Option B

4. Quick Check:

   navigate(actionId) moves between screens [OK]

Hint: navigate() with action ID moves to target screen [OK]

Common Mistakes:

• Thinking navigate() closes or restarts screens
• Assuming navigate() requires a string route
• Confusing action IDs with fragment IDs

4. What is wrong with this code snippet inside a Fragment?

val navController = NavController()
navController.navigate(R.id.action_main_to_settings)

medium

A. NavController must be declared as lateinit var.

B. navigate() requires a string route, not an ID.

C. The action ID is invalid inside a Fragment.

D. NavController cannot be instantiated directly with constructor.

Solution

1. Step 1: Check NavController instantiation

   NavController is obtained via findNavController(), not by calling constructor.

2. Step 2: Validate navigate() usage

   Using an action ID with navigate() is correct; no string needed.

3. Final Answer:

   NavController cannot be instantiated directly with constructor. -> Option D

4. Quick Check:

   NavController is retrieved, not created [OK]

Hint: Never create NavController with constructor; use findNavController() [OK]

Common Mistakes:

• Trying to create NavController with new keyword or constructor
• Confusing action IDs with string routes
• Misunderstanding lateinit usage

5. You want to navigate from Screen A to Screen B and pass a user ID as an argument using NavController. Which approach correctly achieves this?

hard

A. val action = ScreenADirections.actionScreenAToScreenB(userId)
findNavController().navigate(action)

B. findNavController().navigate(R.id.screenB, bundleOf(userId))

C. val navController = NavController()
navController.navigate(R.id.screenB)

D. Use Intent to start Screen B with extras.

Solution

1. Step 1: Understand safe args usage

   Using generated directions class with arguments is the recommended way to pass data safely.

2. Step 2: Compare other options

   Using Intent bypasses the Navigation Component. Passing a bundle without proper key-value pair syntax is invalid. Instantiating NavController directly fails.

3. Final Answer:

   val action = ScreenADirections.actionScreenAToScreenB(userId) findNavController().navigate(action) -> Option A

4. Quick Check:

   Safe args = directions class + navigate(action) [OK]

Hint: Use generated directions class to pass arguments safely [OK]

Common Mistakes:

• Instantiating NavController manually
• Passing arguments without safe args
• Using Intent instead of NavController for navigation