Preview annotation in Android Kotlin

Introduction

The Preview annotation helps you see how your UI looks without running the app on a device. It saves time by showing a quick picture of your screen design.

When you want to check how a screen or component looks while coding.

When you want to quickly test different UI styles or themes.

When you want to share your UI design with teammates without running the app.

When you want to catch layout mistakes early before running the app.

Syntax

Android Kotlin

@Preview(showBackground = true)
@Composable
fun MyPreview() {
    // UI code here
}

Use @Preview above a @Composable function to show its design in Android Studio.

The parameter showBackground = true adds a simple background to better see the UI.

Examples

This shows a simple text preview without background.

Android Kotlin

@Preview
@Composable
fun SimplePreview() {
    Text("Hello Preview")
}

This preview adds a background so the text is easier to see.

Android Kotlin

@Preview(showBackground = true)
@Composable
fun BackgroundPreview() {
    Text("Hello with background")
}

You can name previews to identify them in the preview panel.

Android Kotlin

@Preview(name = "Light Mode")
@Composable
fun LightPreview() {
    Text("Light theme preview")
}

Sample App

This program shows a text message in the preview window with a background. You can see how the text looks without running the app.

Android Kotlin

import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    Text("Welcome to Preview Annotation!")
}

Important Notes

Previews do not run your app code; they only render the UI part.

You can create multiple previews to test different UI states or themes.

If your preview does not show, try rebuilding the project or restarting Android Studio.

Summary

@Preview shows your UI design quickly inside Android Studio.

Use showBackground = true to add a background for better visibility.

Previews help you save time by avoiding running the full app.

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