Week 7 Monday: Grids and Navigation

CS 3180 Mobile Application Development

Today’s Topics

1. Grids with LazyVerticalGrid
2. Navigation Compose essentials
3. Reminder: Chapter 7 quiz on Canvas

Part 1: Grids in Compose

Why a Grid?

Why a Grid? (continued)

• Many equal choices on screen

Why a Grid? (continued)

• Many equal choices on screen
• Efficient use of horizontal space

Why a Grid? (continued)

• Many equal choices on screen
• Efficient use of horizontal space
• Visual scanning is faster than long lists

Why a Grid? (continued)

• Many equal choices on screen
• Efficient use of horizontal space
• Visual scanning is faster than long lists
• Ideal for dashboards and launchers

Grid Basics: Fixed Columns

LazyVerticalGrid(
    columns = GridCells.Fixed(3),
    contentPadding = PaddingValues(16.dp),
    verticalArrangement = Arrangement.spacedBy(12.dp),
    horizontalArrangement = Arrangement.spacedBy(12.dp)
) {
    items(holes, key = { it.number }) { hole ->
        HoleTile(hole)
    }
}

Grid Basics: Adaptive Columns

LazyVerticalGrid(
    columns = GridCells.Adaptive(minSize = 96.dp)
) {
    items(actions, key = { it.id }) { action ->
        ActionTile(action)
    }
}

Tile Composable Example

@Composable
fun HoleTile(hole: Hole) {
    Surface(
        tonalElevation = 2.dp,
        shape = RoundedCornerShape(12.dp)
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(12.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text("Hole ${hole.number}", style = MaterialTheme.typography.titleMedium)
            Text("Par ${hole.par}", style = MaterialTheme.typography.bodyMedium)
        }
    }
}

Grid Spacing Rules

LazyVerticalGrid(
    columns = GridCells.Fixed(3),
    contentPadding = PaddingValues(16.dp),
    verticalArrangement = Arrangement.spacedBy(12.dp),
    horizontalArrangement = Arrangement.spacedBy(12.dp)
) { /* items */ }

Common Grid Mistakes

Common Grid Mistakes (continued)

• No stable keys for items

Common Grid Mistakes (continued)

• No stable keys for items
• Tiles too small for touch targets

Common Grid Mistakes (continued)

• No stable keys for items
• Tiles too small for touch targets
• Heavy work inside tile composables

Common Grid Mistakes (continued)

• No stable keys for items
• Tiles too small for touch targets
• Heavy work inside tile composables
• Forgetting padding for system bars

Part 2: Navigation Compose

Why Navigation?

Why Navigation? (continued)

• Breaks complex flows into focused screens

Why Navigation? (continued)

• Breaks complex flows into focused screens
• Creates consistent back behavior

Why Navigation? (continued)

• Breaks complex flows into focused screens
• Creates consistent back behavior
• Supports deep links and arguments

Why Navigation? (continued)

• Breaks complex flows into focused screens
• Creates consistent back behavior
• Supports deep links and arguments
• Simplifies UI state scope

Navigation Building Blocks

Navigation Building Blocks (continued)

• NavController

Navigation Building Blocks (continued)

• NavController
• NavHost

Navigation Building Blocks (continued)

• NavController
• NavHost
• NavGraph

Navigation Building Blocks (continued)

• NavController
• NavHost
• NavGraph
• Destination composable screens

Basic Navigation Setup

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

    NavHost(
        navController = navController,
        startDestination = "home"
    ) {
        composable("home") { HomeScreen(navController) }
        composable("scores") { ScoresScreen(navController) }
    }
}

Navigation with Arguments

composable(
    route = "hole/{holeNumber}",
    arguments = listOf(navArgument("holeNumber") { type = NavType.IntType })
) { backStackEntry ->
    val holeNumber = backStackEntry.arguments?.getInt("holeNumber") ?: 1
    HoleDetailScreen(holeNumber)
}

Navigate to a Route with Args

val route = "hole/${hole.number}"
navController.navigate(route)

Type-Safe Navigation (Modern Approach)

Why Type-Safe Navigation?

Why Type-Safe Navigation? (continued)

• Compile-time route validation

Why Type-Safe Navigation? (continued)

• Compile-time route validation
• Type-safe argument passing

Why Type-Safe Navigation? (continued)

• Compile-time route validation
• Type-safe argument passing
• Centralized route definitions

Why Type-Safe Navigation? (continued)

• Compile-time route validation
• Type-safe argument passing
• Centralized route definitions
• Better IDE support and autocomplete

Defining Type-Safe Routes

sealed class Routes {
    @Serializable
    data object Home

    @Serializable
    data object Scores

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

Type-Safe NavHost Setup

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

    NavHost(
        navController = navController,
        startDestination = Routes.Home
    ) {
        composable<Routes.Home> {
            HomeScreen(
                onNavigateToScores = {
                    navController.navigate(Routes.Scores)
                }
            )
        }
    }
}

Type-Safe Composable with Arguments

composable<Routes.HoleDetail> { backStackEntry ->
    val route: Routes.HoleDetail = backStackEntry.toRoute()

    HoleDetailScreen(
        holeNumber = route.holeNumber,
        par = route.par
    )
}

Type-Safe Navigation Call

@Composable
fun HomeScreen(onNavigateToHole: (Int, Int) -> Unit) {
    Button(
        onClick = {
            navController.navigate(
                Routes.HoleDetail(
                    holeNumber = 7,
                    par = 4
                )
            )
        }
    ) {
        Text("View Hole 7")
    }
}

Complete Type-Safe Example

sealed class Routes {
    @Serializable
    data object List

    @Serializable
    data class Detail(val petId: Int)

    @Serializable
    data class Adopt(val petId: Int)
}

Complete Example: NavHost

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

    NavHost(
        navController = navController,
        startDestination = Routes.List
    ) {
        composable<Routes.List> {
            ListScreen(
                onImageClick = { pet ->
                    navController.navigate(Routes.Detail(pet.id))
                }
            )
        }
        // continued...
    }
}

Complete Example: Detail Screen

composable<Routes.Detail> { backStackEntry ->
    val details: Routes.Detail = backStackEntry.toRoute()

    DetailScreen(
        petId = details.petId,
        onAdoptClick = {
            navController.navigate(
                Routes.Adopt(details.petId)
            )
        },
        onUpClick = {
            navController.navigateUp()
        }
    )
}

Complete Example: Adopt Screen

composable<Routes.Adopt> { backStackEntry ->
    val adopt: Routes.Adopt = backStackEntry.toRoute()

    AdoptScreen(
        petId = adopt.petId,
        onUpClick = {
            navController.navigateUp()
        }
    )
}

Type-Safe vs String-Based Routes

Required Dependencies

// In build.gradle.kts
dependencies {
    implementation("androidx.navigation:navigation-compose:2.7.+")
    implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.6.+")
}

// Apply plugin
plugins {
    kotlin("plugin.serialization")
}

Back Stack Essentials

navController.popBackStack()

Top App Bar with Back

TopAppBar(
    title = { Text("Hole Details") },
    navigationIcon = {
        IconButton(onClick = { navController.popBackStack() }) {
            Icon(Icons.Default.ArrowBack, contentDescription = "Back")
        }
    }
)

Common Navigation Pitfalls

Common Navigation Pitfalls (continued)

• Routes that don’t match exactly

Common Navigation Pitfalls (continued)

• Routes that don’t match exactly
• Forgetting to pass required arguments

Common Navigation Pitfalls (continued)

• Routes that don’t match exactly
• Forgetting to pass required arguments
• Creating multiple NavController instances

Common Navigation Pitfalls (continued)

• Routes that don’t match exactly
• Forgetting to pass required arguments
• Creating multiple NavController instances
• Doing heavy work inside composables on each navigation

Wrap‑Up

• Grids provide quick, visual selection
• Navigation connects screens cleanly
• Next: hands‑on demo on Wednesday