Image composable in Android Kotlin - Mini App: Build & Ship

Build: Simple Image Display

This screen shows an image centered on the screen with a description below it.

Target UI

---------------------
|                   |
|                   |
|      [Image]      |
|                   |
|                   |
|  This is a cat.   |
|                   |
---------------------

Display an image from drawable resources centered horizontally

Add a text description below the image

Use Jetpack Compose Image composable

Ensure the image has a content description for accessibility

Starter Code

Android Kotlin

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp

@Composable
fun SimpleImageScreen() {
    Surface(modifier = Modifier.fillMaxSize()) {
        Column(
            modifier = Modifier.padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            // TODO: Add Image composable here
            // TODO: Add Text composable below the image
        }
    }
}

Task 1

Task 2

Task 3

Solution

Android Kotlin

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp

@Composable
fun SimpleImageScreen() {
    Surface(modifier = Modifier.fillMaxSize()) {
        Column(
            modifier = Modifier.padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Image(
                painter = painterResource(id = R.drawable.cat_image),
                contentDescription = "Cat image"
            )
            Text(
                text = "This is a cat.",
                style = MaterialTheme.typography.bodyLarge,
                modifier = Modifier.padding(top = 8.dp)
            )
        }
    }
}

We use the Image composable to show the picture from drawable resources. The painterResource function loads the image by its resource ID R.drawable.cat_image. We add a contentDescription for accessibility so screen readers can describe the image. Below the image, a Text composable shows a simple description. The Column centers both horizontally and adds padding around the content for nice spacing.

Final Result

Completed Screen

---------------------
|                   |
|                   |
|      [Image]      |
|                   |
|                   |
|  This is a cat.   |
|                   |
---------------------

User sees a centered image of a cat

Below the image is the text 'This is a cat.'

Screen readers read the description 'Cat image' when focusing on the image

Stretch Goal

Add a button below the text that when clicked shows a Toast message 'You liked the cat!'

💡 Hint

Use androidx.compose.material3.Button and remember to get the context with LocalContext.current to show Toast

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