Glide is a library that loads images we are all too familiar with. I have a video tutorial on using this library for the original toolkit for building native UI. You can find that video again by clicking on the left corner.

Glide's dev team has just released Glide's Compose in September 2022. Due to its recent release, it will be labeled an experimental API. This means that there will be some sudden changes between versions.

How do you include the Compose integration library?

Integrating Glide's Compose into your application is fairly straightforward. you don't need to change or add any other components.

Instead, add a Gradle dependency on the Compose integration library:

implementation "com.github.bumptech.glide:compose:1.0.0-alpha.1"

GlideImage

The primary integration point between Compose and Glide is GlideImage. GlideImage is meant to be similar to Compose's Image function, except it uses Glide to load images asynchronously.

Simple use cases of GlideImage can include just a Model and a content description:

@OptIn(ExperimentalGlideComposeApi::class)
@Composable
fun loadImage(path: String) {
    GlideImage(
        model = path,
        contentDescription = "LoadImage")
​
}

You can supply a custom Modifier to customize how GlideImage is rendered:

@OptIn(ExperimentalGlideComposeApi::class)
@Composable
fun loadImage(path: String) {
    GlideImage(
        model = path,
        contentDescription = "LoadImage",
        modifier = Modifier.fillMaxSize())
​
}

You can also provide the alignment, content scale, colorFilter, and alpha parameters that have identical defaults and function identically to the same parameters in Compose's Image.

To configure the Glide load, you can provide a RequestBuilderTransformation function. The function will be passed a RequestBuilder that already has loaded() called on it with your given model. You can then customize the request with any normal Glide option. Here I will add 2 options when loading: error and placeholder.

@OptIn(ExperimentalGlideComposeApi::class)
@Composable
fun loadImage(path: String) {
    GlideImage(
        model = path,
        contentDescription = "LoadImage",
        modifier = Modifier.fillMaxSize()){
        it
            .error(R.drawable.ic_launcher_background)
            .placeholder(R.drawable.ic_launcher_foreground)
            .load(path)
    }
​
}

Sizing

As with Glide's View integration, Glide's Compose integration will attempt to determine the size of your Composable and use that to load an appropriately sized image. That can only be done efficiently if you provide a Modifier that restricts the size of the Composable. If Glide determines that the Composable's width or height is unbounded, it will use Target.SIZE_ORIGINAL, which can lead to excessive memory usage.

Whenever possible, make sure you either set a Modifier with a fixed size or provide an override() size to your Glide request. In addition to saving memory, loads from the disk cache will also be faster if your size is smaller.

Transitions and State Changes

Glide's Compose API does not explicitly support Glide's Transition class.

Similarly, while Glide's placeholder, error, and fallback request options work and can be provided via GlideImage's RequestBuilderTransform, Glide does not currently support custom Composable functions for each of those states.