Height issue with ContentScale.FillWidth

[luiscurini]

• Library Version: landscapist-coil:1.5.2
• Affected Device: Emulator Android 10, Samsung devices Android 11/12

Describe the Bug:

I wanted to add rounded corners to images that I'm loading, their contentScale is set to ContentScale.FillWidth, so I'm expecting that once the image is loaded the bounds are updated and the clip() modifier is applied. I added a border so the issue can be visible.

HorizontalPager(
            count = content.size,
            state = pagerState,
            modifier = Modifier.fillMaxHeight(fraction = 0.67f),
            verticalAlignment = Alignment.CenterVertically,
            contentPadding = PaddingValues(horizontal = 23.dp)
        ) { page ->
            content.getOrNull(page)?.let {
                CoilImage(
                    imageModel = it.location,
                    contentDescription = it.fileName,
                    contentScale = ContentScale.FillWidth,
                    // FIXME: 24.05.22 found a solution for rounded corners.
                    modifier = Modifier
                        .padding(horizontal = 7.dp)
                        .fillMaxWidth()
                        .clip(
                            RoundedCornerShape(16.dp)
                        )
                        .border(0.5.dp, color = grayscale20, shape = RoundedCornerShape(16.dp))
                )
        }
}

Expected Behavior:

This actually works if I use Coil 2.0 directly

HorizontalPager(
            count = content.size,
            state = pagerState,
            modifier = Modifier.fillMaxHeight(fraction = 0.67f),
            verticalAlignment = Alignment.CenterVertically,
            contentPadding = PaddingValues(horizontal = 23.dp)
        ) { page ->
            content.getOrNull(page)?.let {
                AsyncImage(
                    model = it.location,
                    contentDescription = it.fileName,
                    contentScale = ContentScale.FillWidth,
                    modifier = Modifier
                        .padding(horizontal = 7.dp)
                        .fillMaxWidth()
                        .clip(
                            RoundedCornerShape(16.dp)
                        )
                        .border(0.5.dp, color = grayscale20, shape = RoundedCornerShape(16.dp))
                )
            }
        }

[skydoves]

@luiscurini Sorry for the late response. What about you giving a specific height size for the CoilImage?

[luiscurini]

Hi problem @skydoves, well the idea with this pager is to load different images from the content URIs. They can occupy the maxHeight of the parent as long as FillWidth is respected.

[skydoves]

Thanks for the details. Let me check out the issue soon!

[devandanger]

I'm running into the same problem. I don't get the problem in compose preview using previewHolder, but run into it on emulator runs. (setting the background as red here to illustrate)

[antonb03]

I am seeing the same issue with the GlideImage. I think the issue might be in GlideImage in line 169

val drawable = glideImageState.drawable ?: return@ImageRequest
          imageOptions.LandscapistImage(
            modifier = Modifier.fillMaxSize(), // issue here?
            painter = rememberDrawablePainter(
              drawable = drawable,
              imagePlugins = component.imagePlugins
            )
          )

The LandscapistImage doesn't use the passed modifier but I am not sure, just a guess

[antonb03]

As a workaround, the success callback can be used

CoilImage(
     imageModel = it.location,
     success = { coilImageState ->
          val drawable = coilImageState.drawable
          Image(
               painter = rememberDrawablePainter(drawable = drawable),
               contentScale = ContentScale.FillWidth,
               contentDescription = it.filename
               modifier = Modifier
                    .padding(horizontal = 7.dp)
                    .fillMaxWidth()
                    .clip(
                         RoundedCornerShape(16.dp)
                    )
                   .border(0.5.dp, color = grayscale20, shape = RoundedCornerShape(16.dp))
          )
     }
)

[skydoves]

Thanks for tinkering with this issue @antonb03! Let me check more details and get back to you soon.

[skydoves]

Hi guys, I built the codes below with version 2.0.0 and it seems to work for me.

Box(modifier = Modifier.padding(12.dp)) {
    GlideImage(
      modifier = Modifier.fillMaxWidth()
        .clip(RoundedCornerShape(16.dp))
        .border(0.5.dp, color = Color.Gray, shape = RoundedCornerShape(16.dp)),
      imageOptions = ImageOptions(contentScale = ContentScale.FillWidth),
      imageModel = { R.drawable.virtual_background },
      component = rememberImageComponent {
        +CircularRevealPlugin()
        +PalettePlugin { palette = it }
      },
      previewPlaceholder = R.drawable.poster
    )
  }

Please try to the new release and if you still face the same issue, I'd appreciate it if you could share some examples. Thanks!

[antonb03]

I created a sample project that reproduces the problem. You can check it here https://github.com/antonb03/fillwidthexample

[skydoves]

@antonb03 Could you give me the expected result as well? In this case, you should specify the height size like the below:

  GlideImage(
    modifier = Modifier
      .height(350.dp)
      .clip(RoundedCornerShape(16.dp))
      .border(0.5.dp, color = Color.Gray, shape = RoundedCornerShape(16.dp))
      .background(color = Color.Red),
    imageOptions = ImageOptions(contentScale = ContentScale.FillWidth),
    imageModel = {"https://picsum.photos/id/237/200/300"}
  )

[antonb03]

In my case, I don't want to hardcode the image height because the images from the url can be of various heights. Also, screen width is different for different devices and it is nicer UI when the height of the image is scaled proportionally to the width instead of being hardcoded. The expected behavior is to fill max width of the screen and the height should be scaled proportionally.

I can add some examples later to the sample project I build to show the expected behavior

[skydoves]

Hi everyone, this issue has been fixed since version 2.1.0. Thank you for the reports!

[antonb03]

Just tested it and it works as expected. Thank you so much! @luiscurini I think the issue can be closed

[skydoves]

Awesome. Thank you for checking these, @antonb03!