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.