Image composable in Android Kotlin - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to display an image from a drawable resource using Image composable.

Android Kotlin

Image(painter = painterResource(id = [1]), contentDescription = "Sample image")

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

AR.layout.activity_main

BR.string.app_name

CR.color.primary

DR.drawable.ic_launcher_foreground

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string or layout resource instead of a drawable resource.

Forgetting to use painterResource to load the drawable.

The painterResource function requires a drawable resource ID to load the image. R.drawable.ic_launcher_foreground is a valid drawable resource.

2fill in blank

medium

Complete the code to set the content scale of the Image composable to crop the image.

Android Kotlin

Image(painter = painterResource(id = R.drawable.ic_launcher_foreground), contentDescription = "Sample image", contentScale = [1])

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

AContentScale.Crop

BContentScale.FillBounds

CContentScale.Fit

DContentScale.Inside

Attempts:

3 left

💡 Hint

Common Mistakes

Using ContentScale.Fit which fits the whole image but may leave empty space.

Using ContentScale.FillBounds which stretches the image.

ContentScale.Crop scales the image to fill the bounds and crops any overflow, which is useful to fill the space without distortion.

3fill in blank

hard

Fix the error in the code by completing the modifier to add padding around the Image composable.

Android Kotlin

Image(painter = painterResource(id = R.drawable.ic_launcher_foreground), contentDescription = "Sample image", modifier = Modifier.[1](16.dp))

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

Apadding

BfillMaxSize

Cbackground

Dsize

Attempts:

3 left

💡 Hint

Common Mistakes

Using size instead of padding which changes the composable size.

Using background which changes color but not space.

The padding modifier adds space around the composable. Using padding(16.dp) adds 16 density-independent pixels of space around the image.

4fill in blank

hard

Fill both blanks to create an Image composable that fills the max width and has a rounded corner shape.

Android Kotlin

Image(painter = painterResource(id = R.drawable.ic_launcher_foreground), contentDescription = "Sample image", modifier = Modifier.[1]().clip(RoundedCornerShape([2])))

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

AfillMaxWidth

BfillMaxHeight

C8.dp

D16.dp

Attempts:

3 left

💡 Hint

Common Mistakes

Using fillMaxHeight instead of fillMaxWidth.

Using too small or no corner radius.

fillMaxWidth() makes the image fill the available width. RoundedCornerShape(16.dp) rounds the corners with a radius of 16 density-independent pixels.

5fill in blank

hard

Fill all three blanks to create an Image composable with a content description, a tint color, and a size modifier.

Android Kotlin

Image(painter = painterResource(id = R.drawable.ic_launcher_foreground), contentDescription = [1], colorFilter = ColorFilter.tint([2]), modifier = Modifier.[3](48.dp))

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

A"App icon"

BColor.Red

Csize

Dpadding

Attempts:

3 left

💡 Hint

Common Mistakes

Using padding instead of size for the modifier.

Not providing a content description string.

Using a color without ColorFilter.tint.

The contentDescription should be a descriptive string like "App icon" for accessibility. ColorFilter.tint(Color.Red) applies a red tint to the image. Modifier.size(48.dp) sets the image size to 48 density-independent pixels.

Practice

1. What is the main purpose of the Image composable in Android Jetpack Compose?

easy

A. To play audio files

B. To display pictures or images in the app UI

C. To create buttons

D. To handle user input

Solution

1. Step 1: Understand the role of Image composable

   The Image composable is designed to show pictures or images in the app's user interface.

2. Step 2: Compare with other options

   Playing audio, creating buttons, and handling input are done by other composables, not Image.

3. Final Answer:

   To display pictures or images in the app UI -> Option B

4. Quick Check:

   Image composable = display pictures [OK]

Hint: Image composable always shows pictures or graphics [OK]

Common Mistakes:

• Confusing Image with Button composable
• Thinking Image plays sounds
• Assuming Image handles user input

2. Which of the following is the correct way to load an image resource named logo in an Image composable?

easy

A. Image(resource = R.drawable.logo, description = "App logo")

B. Image(imageId = R.drawable.logo)

C. Image(src = "logo", desc = "App logo")

D. Image(painter = painterResource(id = R.drawable.logo), contentDescription = "App logo")

Solution

1. Step 1: Recall correct Image syntax

   The Image composable requires a painter, which is created by painterResource with the drawable resource ID.

2. Step 2: Check parameters

   Image(painter = painterResource(id = R.drawable.logo), contentDescription = "App logo") uses painterResource(id = R.drawable.logo) and contentDescription, which is correct and recommended for accessibility.

3. Final Answer:

   Image(painter = painterResource(id = R.drawable.logo), contentDescription = "App logo") -> Option D

4. Quick Check:

   Use painterResource and contentDescription [OK]

Hint: Use painterResource with drawable ID and add contentDescription [OK]

Common Mistakes:

• Using wrong parameter names like resource or src
• Omitting contentDescription
• Passing imageId instead of painter

3. What will happen if you run this code snippet?

Image(painter = painterResource(id = R.drawable.ic_launcher), contentDescription = null)

medium

A. The image will display but screen readers will ignore it

B. The app will crash due to missing contentDescription

C. The image will not display at all

D. The image will display with a default description

Solution

1. Step 1: Understand contentDescription null effect

   Setting contentDescription to null means the image is decorative and screen readers will skip it.

2. Step 2: Check image display behavior

   The image still displays normally on screen; only accessibility tools ignore it.

3. Final Answer:

   The image will display but screen readers will ignore it -> Option A

4. Quick Check:

   contentDescription=null means decorative image [OK]

Hint: Null contentDescription hides image from screen readers only [OK]

Common Mistakes:

• Thinking app crashes without contentDescription
• Assuming image won't show
• Believing default description is added automatically

4. Identify the error in this Image composable code:

Image(painter = painterResource(), contentDescription = "Icon")

medium

A. R.drawable.icon is invalid resource

B. contentDescription should be null

C. Missing named parameter 'id' in painterResource call

D. painterResource cannot be used inside Image

Solution

1. Step 1: Check painterResource usage

   painterResource requires the drawable resource ID to be passed with the named parameter 'id'.

2. Step 2: Identify missing 'id' parameter

   The code calls painterResource without providing the required 'id' parameter, causing a syntax error.

3. Final Answer:

   Missing named parameter 'id' in painterResource call -> Option C

4. Quick Check:

   painterResource(id = ...) is required [OK]

Hint: Always use 'id =' when calling painterResource [OK]

Common Mistakes:

• Omitting the 'id' parameter in painterResource
• Setting contentDescription to null incorrectly
• Thinking painterResource is invalid inside Image

5. You want to display a user profile picture from a drawable resource named profile_pic with a circular shape and a description for accessibility. Which code snippet correctly achieves this?

hard

A. Image(painter = painterResource(id = R.drawable.profile_pic), contentDescription = "User profile picture", modifier = Modifier.clip(CircleShape))

B. Image(painterResource(id = R.drawable.profile_pic), contentDescription = null, shape = CircleShape)

C. Image(painter = R.drawable.profile_pic, contentDescription = "Profile", modifier = Modifier.circle())

D. Image(src = R.drawable.profile_pic, desc = "User picture", modifier = Modifier.clip(CircleShape))

Solution

1. Step 1: Use painterResource with id and contentDescription

   Image(painter = painterResource(id = R.drawable.profile_pic), contentDescription = "User profile picture", modifier = Modifier.clip(CircleShape)) correctly uses painterResource with id and provides a meaningful contentDescription.

2. Step 2: Apply circular clipping with Modifier.clip(CircleShape)

   This modifier clips the image into a circle shape, which is the desired effect.

3. Final Answer:

   Image(painter = painterResource(id = R.drawable.profile_pic), contentDescription = "User profile picture", modifier = Modifier.clip(CircleShape)) -> Option A

4. Quick Check:

   Use painterResource + contentDescription + Modifier.clip(CircleShape) [OK]

Hint: Use Modifier.clip(CircleShape) for circular images [OK]

Common Mistakes:

• Passing drawable resource directly as painter
• Omitting contentDescription or setting it null
• Using incorrect modifier or parameter names