Show an animated Gif in Compose

This recipe shows how to show a looping Gif using Coil. In this example we load the image from the /res/raw folder.

Show a Gif

Add to Gradle:

implementation("io.coil-kt:coil:1.4.0")
implementation("io.coil-kt:coil-gif:1.4.0")
implementation("io.coil-kt:coil-compose:1.4.0")

And use this Composable:

package com.pixplicicy.example.ui.components

import android.os.Build
import androidx.annotation.RawRes
import androidx.compose.foundation.Image
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import coil.ImageLoader
import coil.compose.rememberImagePainter
import coil.decode.GifDecoder
import coil.decode.ImageDecoderDecoder
import coil.size.OriginalSize
import com.pixplicity.example.R

@Composable
fun GifImage(
    @RawRes id: Int,
    modifier: Modifier = Modifier
) {

    val context = LocalContext.current
    val imageLoader = ImageLoader.Builder(context)
        .componentRegistry {
            if (Build.VERSION.SDK_INT >= 28) {
                add(ImageDecoderDecoder(context))
            } else {
                add(GifDecoder())
            }
        }
        .build()

    Image(
        painter = rememberImagePainter(
            data = id,
            imageLoader = imageLoader,
            builder = {
                size(OriginalSize)
            },
        ),
        contentDescription = null,
        modifier = modifier
    )
}