Preview annotation in Android Kotlin - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What does the @Preview annotation do in Jetpack Compose?

In Android Jetpack Compose, what is the main purpose of the @Preview annotation when used above a composable function?

A It allows you to see a live preview of the composable UI in Android Studio without running the app.

B It marks the composable function to be included in the app's release build only.

C It automatically generates unit tests for the composable function.

D It disables the composable function from being compiled into the app.

💡 Hint

Think about how you can view UI changes quickly without installing the app.

The @Preview annotation lets Android Studio show a live rendering of the composable function's UI in the design view. This helps developers see UI changes instantly.

📝 Syntax

intermediate

Which @Preview annotation usage is correct?

Given these options, which @Preview annotation syntax correctly previews a composable function named Greeting?

Android Kotlin

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

@Preview
@Composable
fun Greeting() {
    // composable content
}

A

@Preview
@Composable
fun Greeting() { /*...*/ }

B

@Preview(showBackground = true)
@Composable
fun Greeting() { /*...*/ }

C

@Preview(showSystemUi = true)
fun Greeting() { /*...*/ }

D

@Preview
fun Greeting() { /*...*/ }

💡 Hint

Remember that composable functions must be marked with @Composable to render UI.

The @Preview annotation must be used on a function marked with @Composable to render the UI preview. Option A correctly combines both annotations.

❓ ui_behavior

advanced

What happens if you omit @Composable but keep @Preview?

Consider this code snippet: @Preview fun Sample() { Text("Hello") } What will happen when you try to build or preview this in Android Studio?

A The preview will show the Text composable correctly.

B The function will be ignored silently during build and preview.

C The preview will be empty but the build succeeds.

D The build will fail with an error because the function is not marked @Composable.

💡 Hint

Think about what annotation is required to use composable UI elements inside a function.

Composable UI elements like Text require the function to be annotated with @Composable. Omitting it causes a build error.

❓ lifecycle

advanced

How does @Preview affect app runtime behavior?

Does the @Preview annotation affect the app's runtime behavior or APK size when the app is installed on a device?

A Yes, it adds extra UI components visible only in debug builds.

B No, @Preview is only used by Android Studio and is removed from the APK.

C Yes, it increases APK size by including preview metadata.

D No, but it disables the annotated composable at runtime.

💡 Hint

Consider if @Preview code runs on the device or only in the IDE.

@Preview is a design-time annotation used by Android Studio. It does not affect runtime or APK size because it is stripped out during compilation.

🧠 Conceptual

expert

Why use multiple @Preview annotations on one composable?

Why would a developer use multiple @Preview annotations with different parameters on the same composable function?

A To create different versions of the composable for different device architectures.

B To make the composable function run multiple times at app startup.

C To generate multiple previews showing the UI in different states or configurations.

D To automatically generate localization strings for the UI.

💡 Hint

Think about how you can see your UI in different themes or screen sizes without changing code.

Multiple @Preview annotations allow developers to see how the UI looks in various conditions like dark mode, font scale, or device sizes.

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