Coil: Loading indicator stacked on top of image instead of replacing image?

Question

I am loading a photo into a Image with Jetpack Compose and Coil. I want to show a loading indicator when image is loading, that replaces the picture while it loads. However I can't manage to figure it out and get it working properly. Problem with my code is that the loading indicator is loading on top of the image (and to left, bc i have not set center alignment, but it has the same behavior with center aligmnent, jsut that it is centered on top of the image). And it forces the textview down, because of the extra items in the box.

Any ideas on how to fix this? I want to show the loading indicator in the center of the box.

Here is photos with layouts on how it looks, if it helps.

When loaded:

When Loading:

Here is my code:

Column {
            val painter = rememberAsyncImagePainter(
                ImageRequest.Builder(LocalContext.current).data(data = entry.imageUrl).apply(block = fun ImageRequest.Builder.() {
                    crossfade(true)
                        .transformations(
                        )
                        .build()
                }).build()
            )

            val state = painter.state
            if (state is AsyncImagePainter.State.Loading || state is AsyncImagePainter.State.Error) {
                CircularProgressIndicator(
                    color = MaterialTheme.colors.primary,
                    modifier = Modifier.scale(2f)
                )
            }

            viewModel.getImageBackgroundColor(entry.imageUrl, LocalContext.current) { color ->
                dominantColor = color
            }

            Image(
                painter = painter,
                contentDescription = entry.name,
                modifier = Modifier
                    .size(120.dp)
                    .align(CenterHorizontally)
            )

            Text(
                text = entry.name,
                fontFamily = RobotoCondensed,
                fontSize = 20.sp,
                textAlign = TextAlign.Center,
                modifier = Modifier.fillMaxWidth()
            )
        }
    }

Luís Felipe Monteiro · Accepted Answer · 2022-07-04 01:44:53Z

13

You can use SubcomposeAsyncImage from Coil latest version.

SubcomposeAsyncImage(
    model = image,
    contentDescription = null,
    loading = { CircularProgressIndicator() },
)

answered Jul 4, 2022 at 1:44

Luís Felipe Monteiro

1311 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ahmed Over a year ago

CircularProgressIndicator() should be inside the image bounds, but it is not

Gabriele Mariotti · Accepted Answer · 2022-07-14 14:18:47Z

9

You don't need a custom code, just use the builtin SubcomposeAsyncImage provided by the library:

SubcomposeAsyncImage(
    model = "https://example.com/image.jpg",
    loading = {
        CircularProgressIndicator()
    },
    contentDescription = stringResource(R.string.description)
)

answered Jul 14, 2022 at 14:18

Gabriele Mariotti

370k114 gold badges1k silver badges935 bronze badges

1 Comment

Dani Pralea Over a year ago

identical to previous answer :)

Priyank Jain · Accepted Answer · 2022-07-02 17:09:42Z

2

You can use verticalArrangement as Center and horizontalAlignment as CenterHorizontally, which will make views inside the column scope appear in the center. Although if your use case is not to move the text view and just put the progress indicator on the center and top of the image, I will recommend putting both the image and progress indicator wrap inside a Box and giving content alignment as the center. for e.g,

Box(contentAlignment = Alignment.Center) {
    CircularProgressIndicator()
    Image()
}

answered Jul 2, 2022 at 17:09

Priyank Jain

7871 gold badge12 silver badges17 bronze badges

1 Comment

CJR Over a year ago

Thanks for the help, it worked fine, I had also to add modifier = Modifier.align(CenterHorizontally) to the Box()` to also get the horizontal center alignment. `

Collectives™ on Stack Overflow

Coil: Loading indicator stacked on top of image instead of replacing image?

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related