3. Images and Graphics in Compose

🎯 Goal : In this article, we will learn how to work with images and graphics in Jetpack Compose, covering loading images, customizing them, handling vector and bitmap images, and drawing graphics using Canvas.

Don’t forget to subscribe, like and comment if you have any question ❤️

Jetpack Compose makes handling images and graphics simple with the -Image composable and the Canvas API for custom drawings.

Displaying an Image

To display an image in Jetpack Compose, use the Image composable.

📌 Example: Load an Image from Resources

@Composable
fun SimpleImage() {
    Image(
        painter = painterResource(id = R.drawable.sample_image),  
        contentDescription = "Sample Image"
    )
}

📝 painterResource(id = R.drawable.sample_image) → Loads image from res/drawable.
📝 contentDescription → Used for accessibility. It provides a textual description of the image for screen readers.

Image Scaling (contentScale)

Use contentScale to adjust how the image fits inside its container.

Crop -> Crops to fill the container

Fit -> Fits within the container, keeping aspect ratio

FillBounds -> Stretches to fill the container

Inside -> Fits inside the container without cropping

@Composable
fun ScaledImage() {
    Image(
        painter = painterResource(id = R.drawable.sample_image),
        contentDescription = "Sample Image",
        contentScale = ContentScale.Crop,  // Crops to fit container
        modifier = Modifier.size(200.dp)  // Sets image size
    )
}

Image with Rounded Corners

Use Modifier.clip() to round image corners.

@Composable
fun RoundedImage() {
    Image(
        painter = painterResource(id = R.drawable.sample_image),
        contentDescription = "Rounded Image",
        modifier = Modifier
            .size(150.dp)
            .clip(RoundedCornerShape(16.dp))  // Rounded corners
    )
}

Image with Blur and Color Filter

Use ColorFilter to apply color effects.

📌 Example: Applying a Red Tint

@Composable
fun TintedImage() {
    Image(
        painter = painterResource(id = R.drawable.sample_image),
        contentDescription = "Tinted Image",
        colorFilter = ColorFilter.tint(Color.Red,BlendMode.Difference)  // Applies a red tint
    )
}

Drawing Custom Graphics with Canvas

Canvas in Jetpack Compose allows you to draw custom shapes, lines, and paths.

💞I write these articles to help fellow developers. If you found this useful and want to support my work, you can do so here: Buy Me a Coffee ☕

📌 Example: Draw a Circle

@Composable
fun DrawCircleExample() {
    Canvas(modifier = Modifier.size(200.dp)) {
        drawCircle(
            color = Color.Blue,
            radius = size.minDimension / 3
        )
    }
}

📌 Example: Draw a Rectangle

@Composable
fun DrawRectangleExample() {
    Canvas(modifier = Modifier.size(200.dp)) {
        drawRect(
            color = Color.Green,
            size = Size(100f, 100f)
        )
    }
}

Combining Image and Graphics

You can combine images with Canvas drawings for more customization.

📌 Example: Overlaying Text on an Image

@Composable
fun ImageWithTextOverlay() {
    Box(modifier = Modifier.size(200.dp)) {
        Image(
            painter = painterResource(id = R.drawable.sample_image),
            contentDescription = "Overlay Image"
        )
        Text(
            text = "Overlay",
            color = Color.White,
            modifier = Modifier.align(Alignment.Center)
        )
    }
}

Loading Images from URL (Coil Library)

To load images from a URL, use the Coil library.

⚠️ Don’t forget to add ⤵️ to your manifest file.

<uses-permission android:name="android.permission.INTERNET" />

Add these to your dependencies ⤵️

coil-compose = { group = "io.coil-kt.coil3", name = "coil-compose", version = "3.1.0" }
coil-compose-network = {group = "io.coil-kt.coil3",name = "coil-network-okhttp", version = "3.1.0"}

implementation (libs.coil.compose)
implementation (libs.coil.compose.network)

import coil.compose.rememberImagePainter

@Composable
fun NetworkImage() {
   AsyncImage(
            model = "https://cdn3.iconfinder.com/data/icons/picons-social/57/36-android-512.png",
            contentDescription = null,
        )
}

Coil automatically handles caching and image loading from the internet.

⭐ Next Up: List and Grid in Compose

🔎 Click “Learn Jetpack Compose in 30 Days” to see all articles