Why Preview annotation in Android Kotlin? - Purpose & Use Cases

The Big Idea

What if you could see your app screen update instantly as you code it?

The Scenario

Imagine you are designing a mobile app screen and want to see how it looks as you build it. Without a quick way to preview, you have to run the whole app on a device or emulator every time you make a small change.

The Problem

This manual approach is slow and frustrating. Each time you want to check your design, you wait minutes for the app to build and launch. It's easy to lose focus and make mistakes because you can't instantly see your changes.

The Solution

The Preview annotation in Android Kotlin lets you see your UI components instantly inside the development environment. You get a live snapshot of your screen without running the app, saving time and helping you design better interfaces faster.

Before vs After

✗ Before

fun MyScreen() {
  // build UI
}
// Run app to see UI

✓ After

@Preview
@Composable
fun PreviewMyScreen() {
  MyScreen()
}

What It Enables

It enables fast, visual feedback on your UI designs right inside your code editor, making app development smoother and more creative.

Real Life Example

A developer designing a login screen can instantly see how buttons and text fields look and adjust colors or sizes without waiting for the app to launch.

Key Takeaways

Manually running the app to check UI is slow and interrupts flow.

Preview annotation shows UI instantly inside the editor.

This speeds up design and reduces errors in mobile app development.

Practice

1. What is the main purpose of the @Preview annotation in Android Kotlin development?

easy

A. To run the entire app on a physical device

B. To debug runtime errors in the app

C. To display a quick visual preview of a composable UI inside Android Studio

D. To generate APK files automatically

Solution

1. Step 1: Understand the role of @Preview

   The @Preview annotation is used to show a quick visual of a composable UI component inside Android Studio without running the full app.

2. Step 2: Compare with other options

   Running the app, debugging, or generating APKs are different tasks not related to @Preview.

3. Final Answer:

   To display a quick visual preview of a composable UI inside Android Studio -> Option C

4. Quick Check:

   @Preview = Quick UI preview [OK]

Hint: Remember @Preview shows UI fast inside the IDE [OK]

Common Mistakes:

• Confusing @Preview with running the app
• Thinking @Preview debugs code
• Assuming @Preview builds APKs

2. Which of the following is the correct syntax to add a background color in a @Preview annotation?

easy

A. @Preview(backgroundColor = 0xFFFFFF)

B. @Preview(showBackground = true)

C. @Preview(background = true)

D. @Preview(colorBackground = true)

Solution

1. Step 1: Recall the correct property name

   The correct property to add a background in @Preview is showBackground = true.

2. Step 2: Check other options

   Options B, C, and D use incorrect property names or formats not supported by @Preview.

3. Final Answer:

   @Preview(showBackground = true) -> Option B

4. Quick Check:

   Background in @Preview uses showBackground = true [OK]

Hint: Use showBackground = true to add background [OK]

Common Mistakes:

• Using backgroundColor instead of showBackground
• Trying to set color with wrong property
• Misspelling showBackground

3. Given the code snippet:

@Preview(showBackground = true)
@Composable
fun Greeting() {
  Text("Hello, Preview!")
}

What will you see in the Android Studio preview window?

medium

A. The text 'Hello, Preview!' displayed with a background

B. A blank screen with no text

C. A compile error due to missing parameters

D. The text 'Hello, Preview!' without any background

Solution

1. Step 1: Analyze the @Preview annotation

   The annotation uses showBackground = true, so the preview will have a background behind the UI.

2. Step 2: Check the composable content

   The composable displays the text "Hello, Preview!" which will be visible in the preview.

3. Final Answer:

   The text 'Hello, Preview!' displayed with a background -> Option A

4. Quick Check:

   showBackground true means text with background [OK]

Hint: showBackground true means preview has background [OK]

Common Mistakes:

• Assuming no background appears
• Thinking code causes compile error
• Expecting blank preview

4. Identify the error in this @Preview usage:

@Preview(showBackground = yes)
@Composable
fun Sample() {
  Text("Sample Text")
}

medium

A. No error, code is correct

B. Missing @Composable annotation

C. Text composable is not allowed inside @Preview

D. The value 'yes' should be true or false

Solution

1. Step 1: Check the showBackground value

   The value for showBackground must be a Boolean: true or false. 'yes' is invalid.

2. Step 2: Verify other parts

   @Composable is present and Text is allowed inside @Preview, so no errors there.

3. Final Answer:

   The value 'yes' should be true or false -> Option D

4. Quick Check:

   showBackground needs true/false, not 'yes' [OK]

Hint: Use true or false for Boolean properties [OK]

Common Mistakes:

• Using strings like 'yes' or 'no' instead of Booleans
• Forgetting @Composable annotation
• Thinking Text is invalid inside @Preview

5. You want to preview a composable function with a custom device size and background. Which @Preview annotation is correct?

hard

A. @Preview(showBackground = true, device = "spec:width=411dp,height=891dp")

B. @Preview(background = true, deviceSize = "411x891")

C. @Preview(showBackground = true, device = "custom:411x891")

D. @Preview(showBackground = false, device = "spec:width=411dp,height=891dp")

Solution

1. Step 1: Understand device parameter format

   The device parameter uses the format "spec:width=XXXdp,height=YYYdp" to specify custom size.

2. Step 2: Check showBackground and device correctness

   @Preview(showBackground = true, device = "spec:width=411dp,height=891dp") correctly sets showBackground = true and uses the proper device spec format.

3. Step 3: Eliminate incorrect options

   Options A and B use invalid property names or formats. @Preview(showBackground = false, device = "spec:width=411dp,height=891dp") disables background which is not desired.

4. Final Answer:

   @Preview(showBackground = true, device = "spec:width=411dp,height=891dp") -> Option A

5. Quick Check:

   Use showBackground and device spec format correctly [OK]

Hint: Use device="spec:width=..." for custom preview size [OK]

Common Mistakes:

• Using wrong property names like background or deviceSize
• Incorrect device format strings
• Forgetting to set showBackground true