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.