Preview annotation in Android Kotlin - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a preview annotation for a composable function.

Android Kotlin

@[1]
@Composable
fun Greeting() {
    Text("Hello, World!")
}

Drag options to blanks, or click blank then click option'

AOverride

BComposable

CMainActivity

DPreview

Attempts:

3 left

💡 Hint

Common Mistakes

Using @Composable instead of @Preview for previewing.

Forgetting the '@' symbol before the annotation.

The @Preview annotation allows you to see the composable function in Android Studio's preview window.

2fill in blank

medium

Complete the code to specify the device for the preview annotation.

Android Kotlin

@Preview(device = "[1]")
@Composable
fun Greeting() {
    Text("Hello, World!")
}

Drag options to blanks, or click blank then click option'

Aiphone_12

Bpixel_5

Cdesktop

Dtablet

Attempts:

3 left

💡 Hint

Common Mistakes

Using device names that are not supported like 'desktop'.

Not using quotes around the device name.

The device parameter specifies which device to simulate in the preview. 'pixel_5' is a valid device name.

3fill in blank

hard

Fix the error in the preview annotation to show the composable with a background color.

Android Kotlin

@Preview(showBackground = [1])
@Composable
fun Greeting() {
    Text("Hello, World!")
}

Drag options to blanks, or click blank then click option'

ATrue

B"true"

Ctrue

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using "true" as a string instead of true Boolean.

Using capitalized True which is invalid in Kotlin.

The showBackground parameter expects a Boolean value true or false without quotes.

4fill in blank

hard

Fill both blanks to create a preview with a custom name and background shown.

Android Kotlin

@Preview(name = "[1]", showBackground = [2])
@Composable
fun Greeting() {
    Text("Hello, World!")
}

Drag options to blanks, or click blank then click option'

ADefault Preview

Btrue

Cfalse

DGreeting Preview

Attempts:

3 left

💡 Hint

Common Mistakes

Using false for showBackground when background is needed.

Not quoting the name string.

The name parameter is a string for the preview label, and showBackground is a Boolean true to show background.

5fill in blank

hard

Fill all three blanks to create a preview with a specific device, show background, and set a custom name.

Android Kotlin

@Preview(device = "[1]", showBackground = [2], name = "[3]")
@Composable
fun Greeting() {
    Text("Hello, World!")
}

Drag options to blanks, or click blank then click option'

Apixel_4

Bfalse

CMy Greeting Preview

Dtrue

Attempts:

3 left

💡 Hint

Common Mistakes

Using false instead of true for showBackground.

Not quoting device or name strings.

Use 'pixel_4' as device string, true Boolean for showBackground, and a descriptive string for name.

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