How to use Coil with rememberAsyncImagePainter() in Jetpack Compose to load .svg .gif and .jpg/.png from URL

In jetpack compose you can use different libraries to load images. In this short tutorial we will use Coil to load images with .jpg .png, .svg and .gif formats via a URL.

If you want to know more about this you can visit the Coil documentation at the following link: Coil Compose page

First, Add the following dependency in build.gradle(Module:app) and sync your project.

implementation ("io.coil-kt:coil-compose:2.5.0")

Observing AsyncImagePainter

In order to process an image request, a size is required to determine the dimensions of the output image. By default, both AsyncImage and AsyncImagePainter resolve the size of the request after the composition takes place but before the first frame is drawn. This approach is chosen for optimal performance.

val painter = rememberAsyncImagePainter(
    model = ImageRequest.Builder(LocalContext.current)
        .data("https://example.com/image.jpg")
        .size(Size.ORIGINAL) // Set the target size to load the image at.
        .build()
)

Consequently, during the first composition, the AsyncImagePainter.state will be in the 'Loading' state, even if the image is already present in the memory cache and will be drawn in the initial frame.

if (painter.state is AsyncImagePainter.State.Success) {
    // This will be executed during the first composition if the image is in the memory cache.
}

And use the painter created above in your Image component.

Image(
    painter = painter,
    contentDescription = "Your content description"
)

Now, armed with this knowledge, let’s apply what we’ve learned to load both .jpg and .png images.

We will incorporate this ImageComponent() composable function, which can be reused in all the upcoming examples we will create. We will pass as parameters the imageUrl, the imageLoader and the contentDescription .

/**
 * Composable function to display an image using Image component.
 *
 * @param imageUrl The URL of the image to be loaded.
 * @param imageLoader The ImageLoader instance to use for loading the image.
 * @param contentDescription The content description for accessibility.
 */
@Composable
fun ImageComponent(imageUrl: String, imageLoader: ImageLoader, contentDescription: String) {
    // Use Coil's Image component with rememberAsyncImagePainter for asynchronous image loading
    Image(
        painter = rememberAsyncImagePainter(model = imageUrl, imageLoader = imageLoader),
        contentDescription = contentDescription,
        modifier = Modifier
            .padding(all = 16.dp)
            .size(200.dp)
    )
}

Do not forget to add the following permission inAndroidManifest.xml .

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

These are the urls that we will use in the following examples.

const val IMAGE_PNG_URL = "https://upload.wikimedia.org/wikipedia/commons/4/4c/Android_Marshmallow.png"
const val IMAGE_SVG_URL =
    "https://upload.wikimedia.org/wikipedia/commons/e/e0/Android_robot_%282014-2019%29.svg"
const val GIF_URL =
    "https://upload.wikimedia.org/wikipedia/commons/c/cb/Android_easter_eggs_%28version_2.3_to_10%29.gif"

We will use the following test code to load the image in this case .png

/**
 * Composable function to test loading a PNG image using Coil.
 */
@Composable
fun CoilPNGTest() {
    // Create an instance of ImageLoader for loading PNG images
    val imageLoader = ImageLoader.Builder(LocalContext.current)
        .build()

    // Display the PNG image using ImageComponent
    ImageComponent(
        imageUrl = IMAGE_PNG_URL,
        imageLoader = imageLoader,
        contentDescription = "PNG for testing"
    )
}

Run your code and see the result.

Android M image

Now, to be able to load images in .svg format, we need to add the following dependency in build.gradle(Module:app) .

implementation("io.coil-kt:coil-svg:2.5.0")

We will use the following test code to load the image in .svg

/**
 * Composable function to test loading an SVG image using Coil.
 */
@Composable
fun CoilSVGTest() {
    // Create an instance of ImageLoader with an SVG decoder for loading SVG images
    val imageLoader = ImageLoader.Builder(LocalContext.current)
        .components {
            add(SvgDecoder.Factory()) // Add SVG decoder to support SVG images
        }
        .build()

    // Display the SVG image using ImageComponent
    ImageComponent(
        imageUrl = IMAGE_SVG_URL,
        imageLoader = imageLoader,
        contentDescription = "SVG for testing"
    )
}

• The components block is used to configure additional components for the image loader.
• In this case, it adds an SvgDecoder.Factory() to support SVG images. It means that the image loader is configured to handle SVG format by including an SVG decoder.
• Finally, the build() function is called to build the ImageLoader instance with the specified configurations.

Run your code and see the result.

Android Robot image

Finally, to be able to load .gif format, we need to add the following dependency in build.gradle(Module:app) .

implementation("io.coil-kt:coil-gif:2.5.0")

We will use the following test code to load .gif

/**
 * Composable function to test loading a GIF image using Coil.
 */
@Composable
fun CoilGifTest() {
    // Create an instance of ImageLoader with a GIF decoder for loading GIF images
    val imageLoader = ImageLoader.Builder(LocalContext.current)
        .components {
            // Add appropriate decoder based on the Android version
            if (SDK_INT >= Build.VERSION_CODES.P) {
                add(ImageDecoderDecoder.Factory()) // Use ImageDecoder for Android P and above
            } else {
                add(GifDecoder.Factory()) // Use GifDecoder for versions below Android P
            }
        }
        .build()

    // Display the GIF image using ImageComponent
    ImageComponent(
        imageUrl = GIF_URL,
        imageLoader = imageLoader,
        contentDescription = "GIF for testing"
    )
}

• The components block is used to configure additional components for the image loader.
• It includes a conditional statement based on the Android version (SDK_INT).
• If the device is running Android P (API level 28) or above, it adds an ImageDecoderDecoder.Factory() to use the ImageDecoder for decoding images.
• If the device is running a version below Android P, it adds a GifDecoder.Factory() to use the GifDecoder for decoding images.

Run your code and see the result.

Lollipop image

There are many things to explore with Coil so I invite you to read the documentation and use it according to your needs.

And that’s all for today, I hope you like this tutorial. You can test and review the code more carefully in the following repository.

GitHub - munbonecci/CoilSvg: This app was created to learn more about Android compose using Coil to…