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