Preview annotation in Android Kotlin - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the @Preview annotation in Android Jetpack Compose?

The @Preview annotation lets you see a live preview of a composable function in Android Studio without running the app on a device or emulator. It helps you quickly check UI changes.

intermediate

How do you specify the device size or theme in a @Preview annotation?

You can add parameters like device = "specs" or uiMode = Configuration.UI_MODE_NIGHT_YES inside @Preview to simulate different screen sizes or dark mode in the preview.

intermediate

Can you preview a composable function that takes parameters using @Preview?

No, @Preview only works on parameterless composable functions. To preview composables with parameters, create a wrapper composable without parameters that calls it with sample data.

advanced

What happens if you add multiple @Preview annotations to a single composable function?

Android Studio shows multiple previews side by side, each with the different settings specified in each @Preview. This helps compare UI in different configurations easily.

beginner

Why is using @Preview annotation helpful during UI development?

It speeds up UI design by showing instant visual feedback without needing to build and run the app. This saves time and helps catch layout issues early.

What does the @Preview annotation do in Jetpack Compose?

A Shows a live preview of a composable in Android Studio

B Runs the app on a physical device

C Compiles the app faster

D Generates XML layouts automatically

The @Preview annotation displays a live preview of the composable function inside Android Studio.

Which of these is NOT a valid parameter for @Preview?

A showBackground

B device

C uiMode

D onClick

onClick is not a parameter for @Preview; it is used in composable functions for click handling.

How can you preview a composable that requires parameters?

A Add <code>@Preview</code> directly to it

B Create a parameterless wrapper composable calling it with sample data

C Use XML preview instead

D You cannot preview composables with parameters

You create a parameterless wrapper composable annotated with @Preview that calls the original composable with sample arguments.

What happens if you add multiple @Preview annotations to one composable?

A Only the first preview is shown

B Android Studio crashes

C Multiple previews appear side by side

D The previews overwrite each other

Multiple @Preview annotations show multiple previews side by side with different configurations.

Why is @Preview useful for beginners learning Compose?

A It shows UI changes instantly without running the app

B It automatically fixes code errors

C It generates documentation

D It replaces the need for an emulator

@Preview helps beginners see UI updates instantly, speeding up learning and design.

Explain how to use the @Preview annotation to see your composable UI in Android Studio.

Think about how you can check your UI without running the app.

Describe how you would preview a composable function that needs input parameters.

You can’t preview functions with parameters directly.