Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding gif into Jetpack Compose

I have a gif that I would like to place into my app. I know how to insert image resources, but when I try adding the gif it becomes a static image.

DrawImage(image = +imageResource(R.drawable.gif))

Has anyone tried adding a gif into Jetpack Compose, as struggling to find docs online as to how?

like image 858
Michael Johnston Avatar asked Sep 12 '25 07:09

Michael Johnston


1 Answers

Most answers here are outdated. This is the way to do it now, as of coil 2.1.0

An updated version of Hoby's answer above.

implementation "io.coil-kt:coil-compose:2.1.0"
implementation "io.coil-kt:coil-gif:2.1.0"
@Composable
fun GifImage(
    modifier: Modifier = Modifier,
) {
    val context = LocalContext.current
    val imageLoader = ImageLoader.Builder(context)
        .components {
            if (SDK_INT >= 28) {
                add(ImageDecoderDecoder.Factory())
            } else {
                add(GifDecoder.Factory())
            }
        }
        .build()
    Image(
        painter = rememberAsyncImagePainter(
            ImageRequest.Builder(context).data(data = R.drawable.YOUR_GIF_HERE).apply(block = {
                size(Size.ORIGINAL)
            }).build(), imageLoader = imageLoader
        ),
        contentDescription = null,
        modifier = modifier.fillMaxWidth(),
    )
}
like image 150
Dr BigKitkat Avatar answered Sep 14 '25 20:09

Dr BigKitkat