[Coil] Image component does not apply request builder transformations if the content scale is not ContentScale.Fit

[pedrovgs]

Describe the bug

After updating from accompanist-coil 0.7.1 to 0.8.0 and later to 0.9.0 and migrate from Coil I've noticed the new Image component does not apply transformations if the contentScale parameter is not ContentScale.Fit.

To Reproduce

Steps to reproduce the behavior:

1. Load any image with rounded corners transformations or use any other transformation provided by Coil.
2. Configure the CoilImage to show any image and use, for example ContentScale.Crop configuration.
3. Migrate from CoilImage to the new Image component.

Expected behavior

The image shown to the user should be the same and the configured transformations should be applied. However, you'll notice the new component doesn't apply the transformation unless the contentScaleparam is ContentScale.Fit.

Environment:

• Android OS version: All.
• Device: Any
• Accompanist version: Reproducible on any accompanist version >= 0.8.0

[chrisbanes]

What transformations are you using? Or are you referring to using contentScale?

Can you paste in some example code? Are you setting an explicit size?

[pedrovgs]

Hey @chrisbanes I've created a repository just in case you need to check it out. The code is similar to this snippet:

Column {
                    val imageUrl =
                        "https://play-lh.googleusercontent.com/S9lyB4MKAddMAHgSk7Kwjy1FG6yk6x7Nct5jciQxLy6LpRGDijCP7S34Z8W4wsF8RA"
                    Box(
                        Modifier
                            .height(40.dp)
                            .fillMaxWidth()) {
                        CoilImage(
                            modifier = Modifier
                                .background(Color.Green),
                            data = imageUrl,
                            contentDescription = "",
                            requestBuilder = {
                                transformations(
                                    RoundedCornersTransformation(1000f)
                                )
                            },
                            contentScale = ContentScale.Crop
                        )
                    }
                    Box(
                        Modifier
                            .height(40.dp)
                            .fillMaxWidth()) {
                        Image(
                            modifier = Modifier
                                .background(Color.Red),
                            painter = rememberCoilPainter(
                                request = imageUrl,
                                requestBuilder = {
                                    transformations(
                                        RoundedCornersTransformation(1000f)
                                    )
                                },
                            ),
                            contentDescription = "",
                            contentScale = ContentScale.Crop
                        )
                    }

                }

Check out the difference between the deprecated component and the new one:

Maybe the issue is related to the component height, looks like the second image tries to apply the transformation but something wrong happens. What I don't get is why the first one works with the deprecated component and the second one doesn't. 🤔

[chrisbanes]

I think you're missing a fillMaxSize() on the Image. Without that, the image is set to wrap content. #391 is probably related too.

[pedrovgs]

@chrisbanes I tested it on the repository I shared with you and configuring fillMaxSize modifier plus the crop content size doesn't fix the issue. It changes the width but not the height of the image:

[pedrovgs]

@chrisbanes where can I find the latest snapshot published? Maybe your PR #391 fixed this issue.

[chrisbanes]

Just tried on top of tree:

Box(
    Modifier
        .height(40.dp)
        .fillMaxWidth()
) {
    Image(
        modifier = Modifier
            .background(Color.Red)
            .fillMaxSize(),
        painter = rememberCoilPainter(
            request = imageUrl,
            requestBuilder = {
                transformations(
                    RoundedCornersTransformation(1000f)
                )
            },
        ),
        contentDescription = "",
        contentScale = ContentScale.Crop
    )
}

[chrisbanes]

I'm just about to release 0.9.1 with the fix I mentioned in #391

[chrisbanes]

@chrisbanes where can I find the latest snapshot published? Maybe your PR #391 fixed this issue.

https://google.github.io/accompanist/using-snapshot-version/