Material components

Why standard components?

Users have learnt how Android apps work from thousands of apps: a bar at the top with the title, tabs at the bottom, a round button for the main action. Using standard Material components means your app feels familiar from the first tap, gets accessibility support for free, and follows the theme automatically.

Most of these components plug into Scaffold slots, which you met in module 6: topBar, bottomBar, floatingActionButton and snackbarHost.

Bottom navigation

@Composable
fun MainBottomBar(current: String, onSelect: (String) -> Unit) {
    NavigationBar {
        listOf("Home" to Icons.Default.Home, "Orders" to Icons.Default.List, "Account" to Icons.Default.Person)
            .forEach { (label, icon) ->
                NavigationBarItem(
                    selected = current == label,
                    onClick = { onSelect(label) },
                    icon = { Icon(icon, contentDescription = label) },
                    label = { Text(label) },
                )
            }
    }
}

Dialogs

if (showCancelDialog) {
    AlertDialog(
        onDismissRequest = { showCancelDialog = false },
        title = { Text("Cancel order?") },
        text = { Text("Your refund will reach the original payment method in 5-7 days.") },
        confirmButton = { TextButton(onClick = { onCancelOrder(); showCancelDialog = false }) { Text("Cancel order") } },
        dismissButton = { TextButton(onClick = { showCancelDialog = false }) { Text("Keep order") } },
    )
}

Snackbars

val snackbarHostState = remember { SnackbarHostState() }
val scope = rememberCoroutineScope()

Scaffold(snackbarHost = { SnackbarHost(snackbarHostState) }) { padding ->
    Button(onClick = {
        scope.launch {
            val result = snackbarHostState.showSnackbar("Item removed", actionLabel = "Undo")
            if (result == SnackbarResult.ActionPerformed) restoreItem()
        }
    }, Modifier.padding(padding)) { Text("Remove") }
}

Snackbars are better than Toasts for in-app messages: they follow the theme, can carry an action like Undo, and are announced by screen readers. Keep the text short.

Cards, chips (small selectable labels such as "Veg only" filters), switches, checkboxes, sliders and progress indicators complete the everyday set. All of them read colours and shapes from MaterialTheme, so a well-built theme makes every component look right without extra work.

Choosing well

• Only one FAB per screen, for the most common action.
• Use dialogs sparingly; they interrupt. For simple undoable actions, act immediately and offer Undo in a Snackbar.
• Bottom navigation for 3 to 5 sections; more than that belongs in a menu or drawer.
• Bottom sheets are great on phones for filters and choices because they are within thumb reach.

Common mistakes

• Confirming every small action with a dialog. Prefer Undo.
• Vague dialog buttons like "Yes" and "No". Use actions: "Delete", "Keep".
• Several FABs or a FAB for a rare action.
• Icon-only bottom navigation without labels: harder to understand and to use with screen readers.