Week 6 Monday: Lists, App Bars, and Dialogs

CS 3180 Mobile Application Development

Today’s Topics

1. Quiz 2 (Weeks 4–5)
2. LazyColumn essentials and performance
3. App bars and dialogs

Part 1: Quiz 2

Quiz 2 Logistics

• 10–12 minutes
• Closed notes
• Compose + state fundamentals
• ViewModel lifecycle basics

Part 2: Lists with LazyColumn

Why LazyColumn?

Why LazyColumn? (continued)

• Renders only visible rows

Why LazyColumn? (continued)

• Renders only visible rows
• Recycles item content efficiently

Why LazyColumn? (continued)

• Renders only visible rows
• Recycles item content efficiently
• Smooth scrolling with large datasets

Why LazyColumn? (continued)

• Renders only visible rows
• Recycles item content efficiently
• Smooth scrolling with large datasets
• Built-in item keys and animations

Core LazyColumn Pattern

val holes = (1..18).toList()

LazyColumn(
    contentPadding = PaddingValues(16.dp),
    verticalArrangement = Arrangement.spacedBy(8.dp)
) {
    items(holes, key = { it }) { hole ->
        Text("Hole $hole")
    }
}

List Item as a Composable

@Composable
fun HoleRow(holeNumber: Int, par: Int, score: Int?) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(12.dp),
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        Text("Hole $holeNumber")
        Text("Par $par")
        Text(score?.toString() ?: "—")
    }
}

Common LazyColumn Mistakes

Common LazyColumn Mistakes (continued)

• No stable keys when list order changes

Common LazyColumn Mistakes (continued)

• No stable keys when list order changes
• Putting heavy work in row composables

Common LazyColumn Mistakes (continued)

• No stable keys when list order changes
• Putting heavy work in row composables
• Nesting a LazyColumn inside a Column with scroll

Common LazyColumn Mistakes (continued)

• No stable keys when list order changes
• Putting heavy work in row composables
• Nesting a LazyColumn inside a Column with scroll
• Forgetting item padding/spacing

Part 3: App Bars and Dialogs

Top App Bar Basics

TopAppBar(
    title = { Text("Hope Foundation Scores") },
    navigationIcon = {
        IconButton(onClick = onBack) {
            Icon(Icons.Default.ArrowBack, contentDescription = "Back")
        }
    },
    actions = {
        IconButton(onClick = onShare) {
            Icon(Icons.Default.Share, contentDescription = "Share")
        }
    }
)

App Bar Patterns

App Bar Patterns (continued)

• TopAppBar for standard screens

App Bar Patterns (continued)

• TopAppBar for standard screens
• CenterAlignedTopAppBar for brand emphasis

App Bar Patterns (continued)

• TopAppBar for standard screens
• CenterAlignedTopAppBar for brand emphasis
• SmallTopAppBar vs LargeTopAppBar for scroll behavior

App Bar Patterns (continued)

• TopAppBar for standard screens
• CenterAlignedTopAppBar for brand emphasis
• SmallTopAppBar vs LargeTopAppBar for scroll behavior
• Add actions only when they are frequent and safe

Dialog Basics

if (showConfirm) {
    AlertDialog(
        onDismissRequest = { showConfirm = false },
        title = { Text("Reset Scores?") },
        text = { Text("This will clear all 18 holes.") },
        confirmButton = {
            TextButton(onClick = onReset) { Text("Reset") }
        },
        dismissButton = {
            TextButton(onClick = { showConfirm = false }) { Text("Cancel") }
        }
    )
}

Dialog Design Guidelines

Dialog Design Guidelines (continued)

• Use for destructive actions (reset, delete)

Dialog Design Guidelines (continued)

• Use for destructive actions (reset, delete)
• Keep text short and specific

Dialog Design Guidelines (continued)

• Use for destructive actions (reset, delete)
• Keep text short and specific
• Provide clear action labels

Dialog Design Guidelines (continued)

• Use for destructive actions (reset, delete)
• Keep text short and specific
• Provide clear action labels
• Allow cancel/dismiss without penalty

Wrap-Up and Next Steps

Checkpoint for Today

• LazyColumn essentials + keys
• Top app bar structure
• AlertDialog patterns
• Wednesday: build a contacts list demo