Week 6 Wednesday: Lists and Dialogs Demo

CS 3180 Mobile Application Development

Demo Goals

1. Build a LazyColumn list
2. Add a top app bar with actions
3. Use AlertDialog for data entry

Part 1: Contact List UI

Step 1: Data Model

data class Contact(
    val id: String,
    val name: String,
    val role: String
)

Step 2: Sample Data

val initialContacts = listOf(
    Contact("c1", "Maria Lopez", "Volunteer Lead"),
    Contact("c2", "Eli Chen", "Score Runner"),
    Contact("c3", "Noah Patel", "Check-in"),
    Contact("c4", "Ava Johnson", "Volunteer")
)

Step 3: List Screen Skeleton

@Composable
fun ContactsScreen() {
    var contacts by remember { mutableStateOf(initialContacts) }

    LazyColumn(
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        items(contacts, key = { it.id }) { contact ->
            ContactRow(contact)
        }
    }
}

Step 4: Row UI

@Composable
fun ContactRow(contact: Contact) {
    Surface(
        modifier = Modifier.fillMaxWidth(),
        tonalElevation = 2.dp,
        shape = RoundedCornerShape(12.dp)
    ) {
        Row(
            modifier = Modifier.padding(12.dp),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Column {
                Text(contact.name, style = MaterialTheme.typography.titleMedium)
                Text(contact.role, style = MaterialTheme.typography.bodyMedium)
            }
        }
    }
}

Part 2: App Bar and Actions

Step 5: Scaffold + TopAppBar

@Composable
fun ContactsScreen() {
    var contacts by remember { mutableStateOf(initialContacts) }

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Volunteer Contacts") },
                actions = {
                    IconButton(onClick = { /* open dialog */ }) {
                        Icon(Icons.Default.Add, contentDescription = "Add")
                    }
                }
            )
        }
    ) { padding ->
        LazyColumn(
            modifier = Modifier.padding(padding),
            contentPadding = PaddingValues(16.dp),
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            items(contacts, key = { it.id }) { contact ->
                ContactRow(contact)
            }
        }
    }
}

Part 3: Dialog for Adding Contacts

Step 6: Dialog State

var showDialog by remember { mutableStateOf(false) }
var name by remember { mutableStateOf("") }
var role by remember { mutableStateOf("") }

Step 7: AlertDialog UI

if (showDialog) {
    AlertDialog(
        onDismissRequest = { showDialog = false },
        title = { Text("Add Contact") },
        text = {
            Column {
                OutlinedTextField(
                    value = name,
                    onValueChange = { name = it },
                    label = { Text("Name") }
                )
                OutlinedTextField(
                    value = role,
                    onValueChange = { role = it },
                    label = { Text("Role") }
                )
            }
        },
        confirmButton = {
            TextButton(onClick = { /* add contact */ }) {
                Text("Add")
            }
        },
        dismissButton = {
            TextButton(onClick = { showDialog = false }) {
                Text("Cancel")
            }
        }
    )
}

Step 8: Add Contact Action

TextButton(onClick = {
    if (name.isNotBlank() && role.isNotBlank()) {
        val newContact = Contact(
            id = "c${contacts.size + 1}",
            name = name,
            role = role
        )
        contacts = contacts + newContact
        name = ""
        role = ""
        showDialog = false
    }
}) {
    Text("Add")
}

Wrap-Up

What You Built Today

• LazyColumn contact list
• Top app bar with add action
• Dialog with input fields

Friday Lab Preview

• Android CodeLab: Build a Scrollable List
• Practice with LazyColumn and images