Everything is fine with with introducing Coil-GIF into my Jetpack Compose project.

implementation("io.coil-kt.coil3:coil-gif:3.1.0")

Every .gif I add to my AsyncImage is animated fine. Great.

However, I have a specific place in my app where I don't want the GIF to animate but just show the first frame as static image. So just the same behavior as I wouldn't include the library.

The problem is that I don't know which image will be put into this place because I receive only an image URL from an external API. It can be either a .jpg, .png and so on or a .gif.

The coil-gif library is somehow automatically enabled even if I create a ImageLoader by myself via ImageLoader.Builder(context).build().

So my question is, how can I disable the animation just on a specific AsyncImage component?

Everything is fine with with introducing Coil-GIF into my Jetpack Compose project.

implementation("io.coil-kt.coil3:coil-gif:3.1.0")

Every .gif I add to my AsyncImage is animated fine. Great.

However, I have a specific place in my app where I don't want the GIF to animate but just show the first frame as static image. So just the same behavior as I wouldn't include the library.

The problem is that I don't know which image will be put into this place because I receive only an image URL from an external API. It can be either a .jpg, .png and so on or a .gif.

The coil-gif library is somehow automatically enabled even if I create a ImageLoader by myself via ImageLoader.Builder(context).build().

So my question is, how can I disable the animation just on a specific AsyncImage component?

• android
• android-jetpack-compose
• compose-multiplatform
• coil

1 Answer 1

You can update the decoder in ImageLoader using BitmapFactoryDecoder Coil3 decode.

Something like this:

@Composable
fun GiftLoadingImage(
    modifier: Modifier = Modifier
) {
    val gifUrl = "https://www.easygifanimator/images/samples/sparkles.gif"

    val context = LocalContext.current
    val loader = ImageLoader.Builder(context)
        ponents {
            add(BitmapFactoryDecoder.Factory())
        }
        .build()
    AsyncImage(
        model = ImageRequest.Builder(context)
            .data(gifUrl)
            .build(),
        imageLoader = loader,
        contentDescription = null,
        modifier = Modifier
            .size(200.dp)
            .clip(RoundedCornerShape(6.dp)),
        contentScale = ContentScale.Crop
    )
}