Jetpack Compose Coil Placeholder

1. Overview

In this article, we will learn to add a placeholder to a coil image in Jetpack compose. The Coil library (Coroutine Image Loader) from Instacart offers composable functions for loading images from external sources, such as loading remote images over the network.

An image loading library for Android backed by Kotlin Coroutines:

Fast and easy to use. It leverages Kotlin’s language features for simplicity and minimal boilerplate.
Coil performs memory and disk caching, automatically pausing or cancelling requests, and more.
Downsampling the image in memory (Reduces the storage space required and transmission requirements of images)
Lightweight: Coil adds ~2000 methods to your APK (for apps that already use OkHttp and Coroutines), which is comparable to Picasso and significantly less than Glide and Fresco.
Uses modern libraries including Coroutines, OkHttp, Okio, and AndroidX Lifecycles.

2. Jetpack compose Coil example

First, let’s add the import the coil extension library dependency in our build.gradle file:

dependencies {
   implementation("io.coil-kt:coil-compose:2.0.0-rc01")
}

Add the Internet, Network, and Wi-Fi state permissions in the manifest file:

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

Then use the AsyncImage composable to load and display an image:

AsyncImage(
    model = "https://tedblob.com/wp-content/uploads/2021/09/android.png",
    contentDescription = stringResource(R.string.image_content_desc)
)

The AsyncImage composable executes an ImageRequest asynchronously and then renders the result on the screen.

The ImageRequest is an immutable value object that represents a request for an image.

If you notice the sample code above, the AsyncImage composable takes the parameters model and contentDescription.

model – ImageRequest.data value or the ImageRequest itself.
contentDescription – the text used by accessibility services to describe what this image represents.

2.1. Jetpack Compose Async Image placeholder

AsyncImage supports the same arguments as the standard Image composable. Also, it supports setting placeholder/error/fallback painters and onLoading/onSuccess/onError callbacks.

@Composable
fun AsyncImage(
    model: Any?,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    placeholder: Painter? = null,
    error: Painter? = null,
    fallback: Painter? = error,
    onLoading: ((State.Loading) -> Unit)? = null,
    onSuccess: ((State.Success) -> Unit)? = null,
    onError: ((State.Error) -> Unit)? = null,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Fit,
    alpha: Float = DefaultAlpha,
    colorFilter: ColorFilter? = null,
    filterQuality: FilterQuality = DefaultFilterQuality,
)

Here’s an example that loads a fixed 64 dp image with a circle crop, crossfade animation, and sets a placeholder:

 AsyncImage(
            model = ImageRequest.Builder(LocalContext.current)
                .data("https://wallpaperaccess.com/full/137507.jpg")
                .crossfade(true)
                .build(),
            placeholder = painterResource(R.drawable.ic_launcher_foreground),
            contentDescription = stringResource(R.string.image_content_desc),
            contentScale = ContentScale.Crop,
            modifier = Modifier.size(64.dp).clip(CircleShape)
        )

3. Conclusion

To sum up, we have learned to add a placeholder to the Coil image in Jetpack compose. To learn more about Jetpack compose, refer to our articles.

1. Overview

2. Jetpack compose Coil example

2.1. Jetpack Compose Async Image placeholder

3. Conclusion