Navigating between composables in Android Kotlin - Mini App: Build & Ship

Build: Simple Navigation

This screen demonstrates navigation between two composable screens using Jetpack Compose Navigation. The first screen has a button to go to the second screen, and the second screen has a button to go back.

Target UI

Screen 1:
+---------------------+
|    Welcome Screen   |
|                     |
|  [Go to Details]    |
+---------------------+

Screen 2:
+---------------------+
|    Details Screen   |
|                     |
|  [Back to Home]     |
+---------------------+

Use Jetpack Compose Navigation library

Create two composable screens: HomeScreen and DetailsScreen

HomeScreen has a button labeled 'Go to Details' that navigates to DetailsScreen

DetailsScreen has a button labeled 'Back to Home' that navigates back to HomeScreen

Use NavHost and NavController to manage navigation

Starter Code

Android Kotlin

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController

class MainActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
      // TODO: Add NavController and NavHost here
    }
  }
}

@Composable
fun HomeScreen() {
  // TODO: Add UI with button to navigate to DetailsScreen
}

@Composable
fun DetailsScreen() {
  // TODO: Add UI with button to navigate back to HomeScreen
}

Task 1

Task 2

Task 3

Task 4

Solution

Android Kotlin

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController

class MainActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
      val navController = rememberNavController()
      NavHost(navController = navController, startDestination = "home") {
        composable("home") { HomeScreen(navController) }
        composable("details") { DetailsScreen(navController) }
      }
    }
  }
}

@Composable
fun HomeScreen(navController: androidx.navigation.NavHostController) {
  Surface(color = MaterialTheme.colorScheme.background) {
    Button(onClick = { navController.navigate("details") }) {
      Text(text = "Go to Details")
    }
  }
}

@Composable
fun DetailsScreen(navController: androidx.navigation.NavHostController) {
  Surface(color = MaterialTheme.colorScheme.background) {
    Button(onClick = { navController.popBackStack() }) {
      Text(text = "Back to Home")
    }
  }
}

We use rememberNavController() to create a navigation controller that manages navigation state. The NavHost defines two routes: home and details. Each route points to a composable screen.

The HomeScreen has a button that calls navController.navigate("details") to go to the details screen. The DetailsScreen has a button that calls navController.popBackStack() to go back to the previous screen, which is the home screen.

This setup shows a simple way to navigate between composables using Jetpack Compose Navigation.

Final Result

Completed Screen

Screen 1:
+---------------------+
|    Welcome Screen   |
|                     |
|  [Go to Details]    |
+---------------------+

Screen 2:
+---------------------+
|    Details Screen   |
|                     |
|  [Back to Home]     |
+---------------------+

Tap 'Go to Details' button navigates from HomeScreen to DetailsScreen

Tap 'Back to Home' button navigates back from DetailsScreen to HomeScreen

Stretch Goal

Add a third screen called AboutScreen accessible from HomeScreen with a button labeled 'About'. Add navigation to AboutScreen and a back button to return to HomeScreen.

💡 Hint

Add a new composable route 'about' in NavHost. Add a button in HomeScreen that calls navController.navigate("about"). In AboutScreen, add a button that calls navController.popBackStack() to return.

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