Preview annotation in Android Kotlin - Mini App: Build & Ship

Build: PreviewAnnotationScreen

This screen demonstrates how to use the @Preview annotation in Jetpack Compose to see a preview of a composable function in Android Studio.

Target UI

-------------------------
| Preview Annotation    |
|-----------------------|
| Hello, Jetpack Compose |
|                       |
| [Button: Click Me]    |
-------------------------

Create a composable function that displays a greeting text and a button.

Use the @Preview annotation to enable preview in Android Studio.

The button should have the label 'Click Me'.

Starter Code

Android Kotlin

import androidx.compose.material3.*
import androidx.compose.runtime.Composable

// TODO: Add your composable function here

// TODO: Add your @Preview annotated function here

Task 1

Task 2

Solution

Android Kotlin

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

@Composable
fun GreetingScreen() {
  Column(
    modifier = androidx.compose.ui.Modifier.padding(16.dp)
  ) {
    Text(text = "Hello, Jetpack Compose")
    Spacer(modifier = androidx.compose.ui.Modifier.height(8.dp))
    Button(onClick = {}) {
      Text(text = "Click Me")
    }
  }
}

@Preview(showBackground = true)
@Composable
fun GreetingScreenPreview() {
  GreetingScreen()
}

We created a composable function GreetingScreen that shows a text and a button vertically using a Column. We added padding and spacing for better layout.

The @Preview annotation on GreetingScreenPreview allows Android Studio to render this composable in the design preview pane. The showBackground = true parameter adds a background so the preview is clearer.

This setup helps developers see UI changes instantly without running the app on a device or emulator.

Final Result

Completed Screen

-------------------------
| Preview Annotation    |
|-----------------------|
| Hello, Jetpack Compose |
|                       |
| [Button: Click Me]    |
-------------------------

Tapping the 'Click Me' button currently does nothing (empty onClick handler).

Preview in Android Studio shows this UI without running the app.

Stretch Goal

Add a second @Preview function that shows the GreetingScreen in dark mode.

💡 Hint

Use @Preview(uiMode = Configuration.UI_MODE_NIGHT_YES) to enable dark mode preview.

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