Problem with loading images using coil - Jetpack Compose

Question

I am facing a weird problem when trying to load an image from a URL, when I try the following :

    val painter1 = rememberAsyncImagePainter(
                       model = targetUrl,
                       onSuccess = {
                           Log.i("MYTAG", "BasicContentCard: Success!")
                       }
                   )

    Log.i("MYTAG", "BasicContentCard: ${painter1.state}")

    Image(
        painter = painter1,
        contentDescription = null,
        modifier = Modifier.fillMaxSize()
    )

The images load correctly and I even get the success logs for the painter state. The problem emerges when I try to put the same code behind some condition (So that I can show some placeholder composable until the image is fully loaded):

    if (painter1.state is AsyncImagePainter.State.Success){
        Image(
            painter = painter1,
            contentDescription = null,
            modifier = Modifier.fillMaxSize()
        )
    } else {
        PlaceHolderComposable()
    }

The image never loads and even the debug logs indicate that the state of the painter is Loading :

MYTAG  com.rahul.samplelauncher   BasicContentCard: Loading(painter=null)

How do I get around this problem, I want to show a different composable while the image loads.

hasan.z · Accepted Answer · 2024-12-13 12:03:29Z

Loading an image with Coil is straightforward. Use SubcomposeAsyncImage from Coil, which handles everything for you. It provides callbacks like loading, success, and error for better control.

@Composable
fun LoadImage(
    model: String,
    modifier: Modifier = Modifier
) {
    SubcomposeAsyncImage(
        modifier = modifier,
        model = model,
        loading = {
            Box(modifier = Modifier.shimmerLoading())
        },
        contentDescription = null,
    )
}

To use this function, simply call it and specify your desired size.

LoadImage(
    model = uiState.image,
    modifier = Modifier.size(400.dp, 200.dp)
)

By default, the loading block matches the image size, which works well for shimmer effects. However, if you prefer to display a CircularProgressIndicator during loading, you can use requiredSize to customize the size to your preference.

@Composable
fun LoadImage(
    model: String,
    modifier: Modifier = Modifier
) {
    SubcomposeAsyncImage(
        modifier = modifier,
        model = model,
        loading = {
            CircularProgressIndicator(modifier = Modifier.requiredSize(40.dp))
        },
        contentDescription = null,
    )
}

See coil documentation for more.

Luca Nicoletti · Accepted Answer · 2024-06-10 09:55:05Z

2

You can use the AsyncImage composable function:

@Composable
@NonRestartableComposable
fun AsyncImage(
    model: Any?,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    placeholder: Painter? = null,
    error: Painter? = null,
    fallback: Painter? = error,
    onLoading: ((State.Loading) -> Unit)? = null,
    onSuccess: ((State.Success) -> Unit)? = null,
    onError: ((State.Error) -> Unit)? = null,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Fit,
    alpha: Float = DefaultAlpha,
    colorFilter: ColorFilter? = null,
    filterQuality: FilterQuality = DefaultFilterQuality,
)

You can specify your URL assign it to the model parameter, and provide different painters for placeholder and error or fallback.

Another way is to use a state that you can update in the callback onSuccess.

var imageLoaded by rememberSaveable { mutableStateOf(false) }
val painter1 = rememberAsyncImagePainter(
   model = targetUrl,
   onSuccess = {
      imageLoaded = true
   }
)
if (imageLoaded){
   Image(
      painter = painter1,
      contentDescription = null,
      modifier = Modifier.fillMaxSize()
   )
} else {
   PlaceHolderComposable()
}

answered Jun 10, 2024 at 9:55

Luca Nicoletti

2,4652 gold badges21 silver badges34 bronze badges

2 Comments

Rahul Rawat Over a year ago

Hi Luca, can I place a composable in the placeholder block of the AsyncImage() composable?

Luca Nicoletti Over a year ago

No, it accepts a painter, which can be either one of: AsyncImagePainter, BitmapPainter, BrushPainter, ColorPainter, CrossfadePainter or VectorPainter. If you need a custom composable use the second approach, with the state to check whether if the image is loaded or not.

Waseem Abbas · Accepted Answer · 2024-06-11 07:20:06Z

1

The issue you're facing seems to be related to the recomposition of your Composable when the state of the AsyncImagePainter changes. When you put the image loading code behind a condition, it might not trigger a recomposition correctly.

You should use AsyncImage.

AsyncImage(
    model = ImageRequest.Builder(LocalContext.current)
        .data("https://example.com/image.jpg")
        .build(),
    placeholder = painterResource(R.drawable.placeholder),
    contentDescription = stringResource(R.string.description),
    contentScale = ContentScale.Crop,
    modifier = Modifier.clip(CircleShape)
)

It has nice support for setting placeholder and error painters.

Solution 2: If you want to show a custom placeholder composable

To show a placeholder while the image is loading using Jetpack Compose, you can use the produceState. It can convert a noncomposable state to a composable state.

@Composable
fun BasicContentCard(targetUrl: String) {
    val painter = rememberAsyncImagePainter(
        model = targetUrl,
        onSuccess = {
            Log.i("MYTAG", "BasicContentCard: Success!")
        },
        onError = {
            Log.i("MYTAG", "BasicContentCard: Error!")
        }
    )

    // Use produceState to monitor the painter's state
    val painterState by produceState<AsyncImagePainter.State>(initialValue = painter.state) {
        painter.state // Trigger recomposition whenever painter's state changes
    }

    Log.i("MYTAG", "BasicContentCard: ${painterState}")

    if (painterState is AsyncImagePainter.State.Success) {
        Image(
            painter = painter,
            contentDescription = null,
            modifier = Modifier.fillMaxSize()
        )
    } else {
        PlaceHolderComposable()
    }
}

@Composable
fun PlaceHolderComposable() {
    // Your placeholder implementation
}

edited Jun 11, 2024 at 7:20

answered Jun 10, 2024 at 13:33

Waseem Abbas

8755 silver badges8 bronze badges

2 Comments

Rahul Rawat Over a year ago

Hi Waseem, the main requirement Ii have is that I want to show a separate composable PlaceHolderComposable() while the image loads. Do you have any suggestions as to how to accomplish this?

Waseem Abbas Over a year ago

Hi Rahul, I have updated the answer. Please check the Solution 2. I hope it helps you

Abinash Dash · Accepted Answer · 2024-12-31 14:59:25Z

-1

This is how I'm doing it.

    SubcomposeAsyncImage(
        model = url,
        contentDescription = "Deity Image",
        contentScale = ContentScale.Crop,
        modifier = Modifier.fillMaxSize(),
        loading = {
            CircularProgressIndicator(
                color = Color.Gray,
                modifier = Modifier.size(48.dp)
            )
        }
    )

answered Dec 31, 2024 at 14:59

Abinash Dash

736 bronze badges

1 Comment

Community Dec 31, 2024 at 18:12

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Problem with loading images using coil - Jetpack Compose

4 Answers 4

Comments

2 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related