Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Height issue with ContentScale.FillWidth

See original GitHub issue

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))
                )
            }
        }

Issue Analytics

State:
Created a year ago
Reactions:2
Comments:14 (7 by maintainers)

Top GitHub Comments

1reaction

antonb03commented, Sep 30, 2022

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))
          )
     }
)

0reactions

skydovescommented, Nov 14, 2022

Awesome. Thank you for checking these, @antonb03!