Bird
Raised Fist0
Android Kotlinmobile~5 mins

Preview annotation in Android Kotlin - Cheat Sheet & Quick Revision

Choose your learning style10 modes available
LearnWhyDeepUITryChallengeBuildRecallPublish
Recall & Review
beginner
What is the purpose of the @Preview annotation in Android Jetpack Compose?
The @Preview annotation lets you see a live preview of a composable function in Android Studio without running the app on a device or emulator. It helps you quickly check UI changes.
Click to reveal answer
intermediate
How do you specify the device size or theme in a @Preview annotation?
You can add parameters like device = "specs" or uiMode = Configuration.UI_MODE_NIGHT_YES inside @Preview to simulate different screen sizes or dark mode in the preview.
Click to reveal answer
intermediate
Can you preview a composable function that takes parameters using @Preview?
No, @Preview only works on parameterless composable functions. To preview composables with parameters, create a wrapper composable without parameters that calls it with sample data.
Click to reveal answer
advanced
What happens if you add multiple @Preview annotations to a single composable function?
Android Studio shows multiple previews side by side, each with the different settings specified in each @Preview. This helps compare UI in different configurations easily.
Click to reveal answer
beginner
Why is using @Preview annotation helpful during UI development?
It speeds up UI design by showing instant visual feedback without needing to build and run the app. This saves time and helps catch layout issues early.
Click to reveal answer
What does the @Preview annotation do in Jetpack Compose?
AShows a live preview of a composable in Android Studio
BRuns the app on a physical device
CCompiles the app faster
DGenerates XML layouts automatically
Which of these is NOT a valid parameter for @Preview?
AshowBackground
Bdevice
CuiMode
DonClick
How can you preview a composable that requires parameters?
AAdd <code>@Preview</code> directly to it
BCreate a parameterless wrapper composable calling it with sample data
CUse XML preview instead
DYou cannot preview composables with parameters
What happens if you add multiple @Preview annotations to one composable?
AOnly the first preview is shown
BAndroid Studio crashes
CMultiple previews appear side by side
DThe previews overwrite each other
Why is @Preview useful for beginners learning Compose?
AIt shows UI changes instantly without running the app
BIt automatically fixes code errors
CIt generates documentation
DIt replaces the need for an emulator
Explain how to use the @Preview annotation to see your composable UI in Android Studio.
Think about how you can check your UI without running the app.
You got /4 concepts.
    Describe how you would preview a composable function that needs input parameters.
    You can’t preview functions with parameters directly.
    You got /4 concepts.

      Practice

      (1/5)
      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
      Recommended

      Ready to prove it?

      Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.

      10 questions~5 mineasy hard