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
)
}