CODEWITHSUNDEEP
androidandroid-jetpack-composecoil
Eugene
Eugene

Reputation: 4476

How do I create a Jetpack Compose Image that resizes automatically based on a remotely loaded image size?

I would like to display an image with the following rules:

I tried using the Coil dependency and I have this code:

Image(
    painter = rememberImagePainter(viewModel.fullImageUrl),
    contentDescription = null,
    contentScale = ContentScale.FillHeight,
    modifier = Modifier
        .fillMaxWidth()
        .aspectRatio(3.21428f) // TODO: Figure out how to set height/ratio based on image itself
)

When I remove the Image's contentScale and modifier, its height always seems to be zero. I'm not sure what I should do to make Image fill the max width of its parent while determining its own size after Coil loads the image file.

Upvotes: 11

Views: 18397

Answers (1)

Phil Dukhov
Phil Dukhov

Reputation: 88102

As you set flexible width with fillMaxWidth, you need to use ContentScale.FillWidth for your contentScale:

Image(
    painter = rememberImagePainter(
        "https://via.placeholder.com/300.png",
    ),
    contentDescription = null,
    contentScale = ContentScale.FillWidth,
    modifier = Modifier
        .fillMaxWidth()
)

The following will work fine if your image has enough priority. But in some cases coil won't start loading because it's gonna think that image is zero size so no need to display it. For such case you can add size(OriginalSize) parameter to the builder:

rememberImagePainter(
    "https://via.placeholder.com/300.png",
    builder = {
        size(OriginalSize)
    }
)

This parameter makes your view download and put into the memory full size of the image, without optimizing it for the current view. So use it carefully, only if you're sure the image won't be too big and you really can't add use size modifiers.

If image is getting loaded but still not takes enough space, you can set aspect ratio like this:

val painter = rememberImagePainter("https://via.placeholder.com/300.png")
Image(
    painter = painter,
    contentDescription = null,
    contentScale = ContentScale.Fit,
    modifier = Modifier
        .fillMaxWidth()
        .then(
            (painter.state as? ImagePainter.State.Success)
                ?.painter
                ?.intrinsicSize
                ?.let { intrinsicSize ->
                    Modifier.aspectRatio(intrinsicSize.width / intrinsicSize.height)
                } ?: Modifier
        )
)

If none of these helped and painter.state is not changing from Empty, try hardcode height ?: Modifier.height(10.dp) to let image start loading

Upvotes: 26

Related Questions