Week 7 Wednesday: Grids + Navigation Demo

CS 3180 Mobile Application Development

This is the Task

Build a Tournament Hub Application

A golf tournament app with two screens:

1. Hub Screen - A grid dashboard showing holes 1-18, each clickable
2. Hole Detail Screen - Shows details about the selected hole with back navigation

Key Features:

• Grid layout for quick access
• Navigation with arguments (hole number)
• Back button for return navigation

Two Approaches to Navigation

We'll explore two different ways to implement navigation:

Method 1: String-Based Routes (Simple)

• Routes defined as string constants
• Direct string navigation
• Quick to set up

Method 2: Type-Safe Graph (Recommended)

• Routes defined as sealed types
• Compile-time safety
• Better organized for larger apps

We'll build the same app both ways!

Method 1: String-Based Navigation

What Are the Steps? (Method 1)

Build Order:

1. Define navigation routes (strings)
2. Set up NavHost with NavController
3. Create the Hub screen with Scaffold
4. Build the grid layout with LazyVerticalGrid
5. Design individual hole tiles
6. Build the detail screen with back button

Step 1: Define Navigation Routes

Step 1: Define Navigation Routes

object Routes {
    const val HOME = "home"
    const val HOLE_DETAIL = "hole/{holeNumber}"
}

Key Points:

• Centralized constants avoid typos
• Route parameter in curly braces {holeNumber}
• Simple string-based approach

Step 2: Set Up NavHost with NavController

Step 2: Set Up NavHost with NavController

@Composable
fun GolfApp() {
    val navController = rememberNavController()

    NavHost(
        navController = navController,
        startDestination = Routes.HOME
    ) {
        composable(Routes.HOME) { HubScreen(navController) }
        composable(
            route = Routes.HOLE_DETAIL,
            arguments = listOf(navArgument("holeNumber") { type = NavType.IntType })
        ) { entry ->
            val holeNumber = entry.arguments?.getInt("holeNumber") ?: 1
            HoleDetailScreen(holeNumber, navController)
        }
    }
}

Step 2: Set Up NavHost with NavController

Key Points:

• Define routes inline in NavHost
• Manual argument extraction with getInt()
• Pass NavController to screens

Step 3: Create the Hub Screen with Scaffold

Step 3: Create the Hub Screen with Scaffold

@Composable
fun HubScreen(navController: NavController) {
    val holes = (1..18).toList()

    Scaffold(
        topBar = { TopAppBar(title = { Text("Tournament Hub") }) }
    ) { padding ->
        HoleGrid(
            holes = holes,
            onHoleClick = { hole ->
                navController.navigate("hole/$hole")
            },
            modifier = Modifier.padding(padding)
        )
    }
}

Key Points:

• Generates hole numbers 1-18
• Navigation string built dynamically: "hole/$hole"
• NavController used directly

Step 4: Build the Grid Layout with LazyVerticalGrid

Step 4: Build the Grid Layout with LazyVerticalGrid

@Composable
fun HoleGrid(
    holes: List<Int>,
    onHoleClick: (Int) -> Unit,
    modifier: Modifier = Modifier
) {
    LazyVerticalGrid(
        modifier = modifier,
        columns = GridCells.Fixed(3),
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(12.dp),
        horizontalArrangement = Arrangement.spacedBy(12.dp)
    ) {
        items(holes, key = { it }) { hole ->
            HoleTile(hole, onHoleClick)
        }
    }
}

Key Points:

• 3 columns for good mobile layout
• Spacing keeps tiles comfortable to tap

Step 5: Design Individual Hole Tiles

Step 5: Design Individual Hole Tiles

@Composable
fun HoleTile(hole: Int, onHoleClick: (Int) -> Unit) {
    Surface(
        shape = RoundedCornerShape(12.dp),
        tonalElevation = 2.dp,
        modifier = Modifier
            .fillMaxWidth()
            .clickable { onHoleClick(hole) }
    ) {
        Box(
            modifier = Modifier.padding(20.dp),
            contentAlignment = Alignment.Center
        ) {
            Text("Hole $hole", style = MaterialTheme.typography.titleMedium)
        }
    }
}

Key Points:

• .clickable modifier triggers navigation
• Surface provides elevation and shape

Step 6: Build the Detail Screen with Back Button

Step 6: Build the Detail Screen with Back Button

@Composable
fun HoleDetailScreen(holeNumber: Int, navController: NavController) {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Hole $holeNumber") },
                navigationIcon = {
                    IconButton(onClick = { navController.popBackStack() }) {
                        Icon(Icons.Default.ArrowBack, contentDescription = "Back")
                    }
                }
            )
        }
    ) { padding ->
        Column(
            modifier = Modifier
                .padding(padding)
                .padding(16.dp)
        ) {
            Text("Par: 4", style = MaterialTheme.typography.titleMedium)
            Text("Notes: Water hazard left", style = MaterialTheme.typography.bodyMedium)
        }
    }
}

Step 6: Build the Detail Screen with Back Button

Key Points:

• popBackStack() returns to previous screen
• Hole number displayed in title bar
• NavController dependency in screen

Method 1 Complete!

What We Built:

• String-based route navigation
• Grid dashboard with 18 holes
• Detail screen with back navigation

Pros:

• Simple and straightforward
• Easy to learn
• Quick to set up

Cons:

• No compile-time safety (typos possible)
• NavController in screens (harder to test)
• Manual argument parsing

Method 2: Type-Safe Navigation Graph

What Are the Steps? (Method 2)

Build Order:

1. Define type-safe navigation routes
2. Create a navigation graph builder
3. Set up NavHost with the graph
4. Create the Hub screen with callbacks
5. Build the grid layout (same as Method 1)
6. Design individual hole tiles (same as Method 1)
7. Build the detail screen with callbacks

Step 1: Define Type-Safe Navigation Routes

Step 1: Define Type-Safe Navigation Routes

import kotlinx.serialization.Serializable

@Serializable
sealed interface Screen {
    @Serializable
    data object Home : Screen

    @Serializable
    data class HoleDetail(val holeNumber: Int) : Screen
}

Key Points:

• @Serializable enables type-safe navigation
• Sealed interface ensures exhaustive when expressions
• Data class carries parameters (holeNumber)
• Data object for routes with no parameters

Step 2: Create a Navigation Graph Builder

Step 2: Create a Navigation Graph Builder

fun NavGraphBuilder.golfNavGraph(navController: NavController) {
    composable<Screen.Home> {
        HubScreen(
            onNavigateToHole = { holeNumber ->
                navController.navigate(Screen.HoleDetail(holeNumber))
            }
        )
    }

    composable<Screen.HoleDetail> { backStackEntry ->
        val holeDetail = backStackEntry.toRoute<Screen.HoleDetail>()
        HoleDetailScreen(
            holeNumber = holeDetail.holeNumber,
            onNavigateBack = { navController.popBackStack() }
        )
    }
}

Step 2: Create a Navigation Graph Builder

Key Points:

• composable<Screen.Home> uses type instead of string
• toRoute<>() extracts typed arguments automatically
• Lambda callbacks keep screens decoupled from NavController

Step 3: Set Up NavHost with the Graph

Step 3: Set Up NavHost with the Graph

@Composable
fun GolfApp() {
    val navController = rememberNavController()

    NavHost(
        navController = navController,
        startDestination = Screen.Home
    ) {
        golfNavGraph(navController)
    }
}

Key Points:

• startDestination is now a typed route object (not string)
• Graph builder keeps NavHost clean
• All routes defined in one place

Step 4: Create the Hub Screen with Callbacks

Step 4: Create the Hub Screen with Callbacks

@Composable
fun HubScreen(onNavigateToHole: (Int) -> Unit) {
    val holes = (1..18).toList()

    Scaffold(
        topBar = { TopAppBar(title = { Text("Tournament Hub") }) }
    ) { padding ->
        HoleGrid(
            holes = holes,
            onHoleClick = onNavigateToHole,
            modifier = Modifier.padding(padding)
        )
    }
}

Key Points:

• Callback instead of NavController dependency
• Easier to test and preview
• Screen doesn't know about navigation infrastructure

Step 5: Build the Grid Layout

This step is identical to Method 1!

@Composable
fun HoleGrid(
    holes: List<Int>,
    onHoleClick: (Int) -> Unit,
    modifier: Modifier = Modifier
) {
    LazyVerticalGrid(
        modifier = modifier,
        columns = GridCells.Fixed(3),
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(12.dp),
        horizontalArrangement = Arrangement.spacedBy(12.dp)
    ) {
        items(holes, key = { it }) { hole ->
            HoleTile(hole, onHoleClick)
        }
    }
}

Step 6: Design Individual Hole Tiles

This step is identical to Method 1!

@Composable
fun HoleTile(hole: Int, onHoleClick: (Int) -> Unit) {
    Surface(
        shape = RoundedCornerShape(12.dp),
        tonalElevation = 2.dp,
        modifier = Modifier
            .fillMaxWidth()
            .clickable { onHoleClick(hole) }
    ) {
        Box(
            modifier = Modifier.padding(20.dp),
            contentAlignment = Alignment.Center
        ) {
            Text("Hole $hole", style = MaterialTheme.typography.titleMedium)
        }
    }
}

Step 7: Build the Detail Screen with Callbacks

Step 7: Build the Detail Screen with Callbacks

@Composable
fun HoleDetailScreen(
    holeNumber: Int,
    onNavigateBack: () -> Unit
) {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Hole $holeNumber") },
                navigationIcon = {
                    IconButton(onClick = onNavigateBack) {
                        Icon(Icons.Default.ArrowBack, contentDescription = "Back")
                    }
                }
            )
        }
    ) { padding ->
        Column(
            modifier = Modifier
                .padding(padding)
                .padding(16.dp)
        ) {
            Text("Par: 4", style = MaterialTheme.typography.titleMedium)
            Text("Notes: Water hazard left", style = MaterialTheme.typography.bodyMedium)
        }
    }
}

Step 7: Build the Detail Screen with Callbacks

Key Points:

• Back navigation through callback (not NavController)
• No navigation dependency
• Easy to preview and test in isolation

Method 2 Complete!

What We Built:

• Type-safe navigation with sealed routes
• Organized navigation graph
• Grid dashboard with 18 holes
• Decoupled screens using callbacks

Pros:

• Compile-time safety (no typos possible)
• Screens are testable (no NavController)
• Better code organization
• Automatic argument parsing

Method 2 Complete!

Cons:

• Slightly more setup code
• Need to learn serialization

Comparison: Method 1 vs Method 2

Feature	Method 1 (Strings)	Method 2 (Type-Safe)
Setup Complexity	Simple	Moderate
Type Safety	None	Compile-time
Testability	Hard (NavController)	Easy (callbacks)
Scalability	Gets messy	Stays organized
Error Detection	Runtime	Compile-time
Best For	Learning, tiny apps	Production apps

Quick Review

Today We Learned:

• Grid layouts with LazyVerticalGrid
• Two approaches to navigation in Compose
• String-based routes (simple but limited)
• Type-safe navigation graphs (robust and scalable)

Key Takeaways:

• Both methods achieve the same result
• Type-safe navigation prevents bugs at compile-time
• Decoupling screens from NavController improves testability
• Choose the right tool for your project size

Quick Review

Next Steps:

• Apply Method 2 to your Hope Foundation app
• Use navigation graphs for multi-screen flows