Previews that scale

Previews render composables in Android Studio without running the app. They work well when screens are split into a stateless content composable that takes plain state and lambdas, and a thin route composable that wires in the ViewModel. Then you preview the content with sample data for each state: loading, empty, error, long text, dark mode and large font.

@PreviewParameter feeds a list of sample states into one preview.

Multipreview annotations such as @PreviewLightDark and @PreviewFontScale cover themes and font sizes.

Previews can't run network or Hilt injection, which is another reason to keep content stateless.

Screenshot tests (Compose Preview Screenshot Testing, Paparazzi, Roborazzi) can render the same previews in CI.

data class NotesUi(val loading: Boolean = false, val notes: List<String> = emptyList())

@Composable
fun NotesContent(state: NotesUi, onAdd: () -> Unit) {
    if (state.loading) CircularProgressIndicator() else Column {
        state.notes.forEach { Text(it) }
        Button(onClick = onAdd) { Text("Add") }
    }
}

@Preview
@Composable
fun NotesContentPreview() {
    NotesContent(NotesUi(notes = listOf("Milk", "A very long note that should wrap")), onAdd = {})
}

Common mistakes

• Previewing composables that take a ViewModel.
• Only previewing the happy path.
• Leaving previews in production code paths that pull in fake data at runtime.

Talk about the route/content split; that's the design decision previews depend on.

Follow-up questions

Think of your answer first, then open the hint.

1. How would you catch visual regressions?

   Show hint

   Screenshot tests built on the previews, run in CI.

2. Why split route and content?

   Show hint

   So the content can be previewed and tested with plain data.

Compare on iOS: SwiftUI previews with #Preview and @Previewable SwiftUI previews follow the same split between data and view.