Image composable in Android Kotlin - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What will this Image composable display?

Consider this Kotlin Compose code snippet:

Image(
  painter = painterResource(id = R.drawable.ic_launcher_foreground),
  contentDescription = "App icon",
  modifier = Modifier.size(64.dp)
)

What will the user see on the screen?

Android Kotlin

Image(
  painter = painterResource(id = R.drawable.ic_launcher_foreground),
  contentDescription = "App icon",
  modifier = Modifier.size(64.dp)
)

A An error because painterResource cannot be used inside Image.

B A 64x64 dp sized image showing the app's launcher foreground icon with accessibility label 'App icon'.

C A full screen image ignoring the size modifier.

D A blank space because contentDescription is not null.

💡 Hint

Think about what painterResource and modifier.size do in Compose Image.

The Image composable uses painterResource to load a drawable resource. The modifier.size(64.dp) sets the image size to 64x64 dp. The contentDescription provides accessibility info. So the image will appear as a 64x64 dp icon with the given description.

📝 Syntax

intermediate

Which option correctly loads a network image in Compose?

You want to load an image from a URL in Jetpack Compose. Which code snippet is correct?

A Image(painter = rememberImagePainter("https://example.com/image.png"), contentDescription = "Network image")

B Image(painter = painterResource("https://example.com/image.png"), contentDescription = "Network image")

C Image(painter = loadImage("https://example.com/image.png"), contentDescription = "Network image")

D Image(painter = ImageBitmap.imageResource("https://example.com/image.png"), contentDescription = "Network image")

💡 Hint

Remember which library provides rememberImagePainter for network images.

Option A uses rememberImagePainter from the Coil library to load images from URLs in Compose. Other options use invalid or unsupported functions for network images.

❓ lifecycle

advanced

What happens if you forget contentDescription in Image composable?

In Jetpack Compose, what is the impact of omitting the contentDescription parameter in an Image composable?

Android Kotlin

Image(painter = painterResource(id = R.drawable.ic_launcher_foreground))

A The image will not display on the screen.

B The app will crash at runtime with a NullPointerException.

C The image will display but with a default description 'Image'.

D The image will be ignored by accessibility services, making the app less accessible.

💡 Hint

Think about accessibility and screen readers.

If contentDescription is omitted or null, accessibility services skip the image, which can confuse users relying on screen readers. The app does not crash and the image still displays.

🔧 Debug

advanced

Why does this Image not show in Compose?

Given this code:

Image(
  painter = painterResource(id = R.drawable.ic_launcher_foreground),
  contentDescription = "Icon",
  modifier = Modifier.size(0.dp)
)

Why does the image not appear on screen?

Android Kotlin

Image(
  painter = painterResource(id = R.drawable.ic_launcher_foreground),
  contentDescription = "Icon",
  modifier = Modifier.size(0.dp)
)

A Because contentDescription is too short.

B Because painterResource cannot load drawable resources.

C Because the size modifier sets width and height to zero, making the image invisible.

D Because Image composable requires a background color to display.

💡 Hint

Check the size modifier values.

Setting Modifier.size(0.dp) makes the composable have zero width and height, so it is not visible on screen. The image is loaded correctly but not shown.

🧠 Conceptual

expert

How does contentScale affect Image composable rendering?

In Jetpack Compose, what is the effect of setting contentScale = ContentScale.Crop on an Image composable?

Android Kotlin

Image(
  painter = painterResource(id = R.drawable.sample),
  contentDescription = "Sample",
  modifier = Modifier.size(100.dp, 50.dp),
  contentScale = ContentScale.Crop
)

A The image is scaled to fill the 100x50 dp area, cropping parts that don't fit while preserving aspect ratio.

B The image is stretched to exactly 100x50 dp, ignoring aspect ratio.

C The image is scaled down to fit inside 100x50 dp without cropping, possibly leaving empty space.

D The image is displayed at its original size ignoring the modifier size.

💡 Hint

Think about how cropping works with aspect ratio preservation.

ContentScale.Crop scales the image to fill the target size and crops any overflow, preserving the image's aspect ratio. This means parts of the image may be cut off to avoid distortion.

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