A Composable Image

Every app shows pictures, and in Compose you draw them with the Image composable. It is the declarative replacement for the old ImageView. 🖼️

Image does not take a raw resource id. It takes a painter, a small object that knows how to draw your picture onto the screen.

To turn a drawable in res into a painter, you call painterResource with its resource id. This reads your PNG or vector asset.

Pass that painter to Image and it appears on screen. This single line draws your drawable wherever the composable sits.

Image always asks for a contentDescription. Screen readers speak it aloud, so describe the picture in a few clear words.

If a picture is purely decorative and adds no meaning, set contentDescription to null so TalkBack skips it instead of reading noise.

Compose loves vector drawables. A vector stays razor sharp at any size because it is math, not fixed pixels, so it never looks blurry.

An Image draws at the bitmap size by default. Add a Modifier.size to make it exactly the dimensions your layout needs.

painterResource only handles local assets. For remote URLs you reach for a loader library, the most popular being Coil with rememberAsyncImagePainter.

You can recolor a simple image with a colorFilter. This is great for monochrome icons you want to match your theme color.

Use Image for photos and rich artwork. For small, theme-tinted symbols, the lighter Icon composable is usually the better choice.

Which argument does the Image composable always require alongside the painter?

You learned that Image draws a painter from painterResource, always needs a contentDescription, and sizes with a modifier. Next up: Material icons! ✨