Jetpack Compose Load Image With Coil

November 2, 2021

Edit Module’s build.gradle

dependencies {
  implementation "io.coil-kt:coil-compose:1.4.0"
}

Add permission to AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="...">

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

</manifest>

Sample Code

Load Image

Image(
    painter = rememberImagePainter("https://picsum.photos/id/237/200/300"),
    contentDescription = "Black Dog",
    modifier = Modifier.size(128.dp)
)

Load image with

  • Placeholder
  • Transition
  • Error image
  • Scale/Crop image to fully fit view
val painter = rememberImagePainter(
    data = "https://picsum.photos/id/237/200/300",
    builder = {
        placeholder(R.drawable.placeholder)
        // transition when placeholder -> image
        crossfade(true)
        error(R.drawable.error)
    }
)

Image(
    painter = painter,
    contentDescription = null,
    modifier = Modifier.size(128.dp),
    contentScale = ContentScale.Crop
)

Maintain aspect ratio and crop/scale to fit

Image(
    painter = painter,
    contentDescription = null,
    modifier = modifier.aspectRatio(1.0f), 
    contentScale = ContentScale.Crop
)

Load 3 Grid Images per row

@Composable
fun SampleScreen() {
    val rowSize = 3
    LazyColumn {
        (1..10).chunked(rowSize) { imageIds ->
            Row {
                for ((index, imageId) in imageIds.withIndex()) {
                    val url = "https://picsum.photos/id/$imageId/200/300"
                    PhotoItem(
                        modifier = Modifier.fillMaxWidth(1f / (rowSize - index)),
                        data = url
                    )
                }
            }
        }
    }
}

@Composable
fun PhotoItem(modifier: Modifier, data: Any) {
    val painter = rememberImagePainter(
        data = data,
        builder = {
            placeholder(R.drawable.placeholder)
            // transition when placeholder -> image
            crossfade(true)
            error(R.drawable.error)
        }
    )

    Image(
        painter = painter,
        contentDescription = null,
        modifier = modifier.aspectRatio(1.0f),
        contentScale = ContentScale.Crop
    )
}

NOTE: Alternatively you could use LazyVerticalGrid

References:

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.