Jetpack compose — Load Images from URL

OverView:

This tutorial explains how to fetch Image from URL and display in user interface.

Coil :

Coil is an image loading library for Android backed by Kotlin Coroutines.

Its fast (Memory Optimizations ,disk caching),

lightweight(adds less than 2000 methods to apk which is less than Glide and almost equal to Picasso),

Easy to use (Leverage Kotlin features and less boiler plate code), modern(Uses modern libraries like coroutines,okhttp,AndroidX lifecycles)

To add support of Coil for Jetpack compose add below dependency to build.gradle

//To display Images from URL
implementation "io.coil-kt:coil-compose:2.4.0"

With this dependency, you can use Coil’s Image composable library to load and display images in your Jetpack Compose UI.

In order to display Image from URL we need to use below Coil’s composable function

AsyncImage(
    model = ImageRequest.Builder(LocalContext.current)
        .data(imageUrl)
        .crossfade(true)
        .build(),
    placeholder = painterResource(R.drawable.ic_baseline_shopping_cart_24),
    contentDescription = stringResource(R.string.app_name),
    contentScale = ContentScale.Crop,
    modifier = Modifier.size(50.dp),
    colorFilter = ColorFilter.tint(Color.Blue)
)

AsyncImage is a composable that executes an image request asynchronously and renders the result. It supports the same arguments as the standard Image composable and additionally, it supports setting placeholder/error/fallback painters and onLoading/onSuccess/onError callbacks.

The attributes in the AsyncImage composable serve the following purposes:

• model: Specifies the image request model, which includes the image URL and other configuration options. In the example, it is using ImageRequest.Builder to create a request with the image URL "https://example.com/image.jpg", enabling crossfade transition between placeholder and loaded image.
• placeholder: Provides a placeholder image resource while the actual image is being loaded or if there is an error. In the example, it is using the painterResource function to specify a drawable resource (R.drawable.placeholder) as the placeholder.
• contentDescription: Sets the text description for the image content, which is useful for accessibility purposes. In the example, it is using a string resource (R.string.description) to provide the description.
• contentScale: Defines how the image content should be scaled and positioned within the composable. In this case, ContentScale.Crop is used to crop and scale the image to fit within the bounds while maintaining its aspect ratio.
• modifier: Applies a modifier to the AsyncImage composable, in this case, Modifier.clip(CircleShape). It clips the image to a circular shape using the CircleShape provided by the androidx.compose.ui.graphics.Shape class.

When crossfade is set to true, it enables a smooth transition between the placeholder image and the loaded image. Initially, the placeholder image is displayed, and once the actual image is loaded, it smoothly fades in to replace the placeholder. This provides a visually appealing effect as the images transition.

We can have a reusable composable function as below in our apps to display image from URL using this library :

@Composable
fun CategoryImageFromURLWithPlaceHolder(imageUrl: String){
    AsyncImage(
        model = ImageRequest.Builder(LocalContext.current)
            .data(imageUrl)
            .crossfade(true)
            .build(),
        placeholder = painterResource(R.drawable.ic_baseline_shopping_cart_24),
        contentDescription = stringResource(R.string.app_name),
        contentScale = ContentScale.Crop,
        modifier = Modifier.size(50.dp),
        colorFilter = ColorFilter.tint(Color.Blue)
    )
}

CategoryImageFromURLWithPlaceHolder("https://dummyimage.com/600x400/000/fff.png&text=hello")

Congratulations:

We learned how to load image from URL in Jetpack Compose

Coil library reference:

Jetpack Compose - Coil