Using Coil to load an image in Compose, and trying...

# compose

[Brian Norman]

Using Coil to load an image in Compose, and trying to fit the image into a box with a height < heightOfImage. Anyone know of a way to make the Coil crop bias towards cropping the top portion of an image, so that the bottom of the image is kept? I tried a custom shape to use in Modifier.clip() like:

val preferBottomContentShape = GenericShape { size, _ ->  
    moveTo(0f, size.height - desiredHeightPx)
    lineTo(size.width, size.height - desiredHeightPx)
    lineTo(size.width, size.height)
    lineTo(0f, size.height)
}

But the issue there is that there is left over whitespace from the background where the top of that image used to be

[Oleksandr Balan]

Did you try tweak contentScale & alignment on your Image ?

See original, cropped with center alignment and cropped with bottom alignment:

Image(
    painter = painterResource(R.drawable.avatar),
    contentDescription = null,
)

Image(
    painter = painterResource(R.drawable.avatar),
    contentDescription = null,
    contentScale = ContentScale.Crop,
    modifier = Modifier.height(100.dp)
)

Image(
    painter = painterResource(R.drawable.avatar),
    contentDescription = null,
    contentScale = ContentScale.Crop,
    alignment = Alignment.BottomCenter,
    modifier = Modifier.height(100.dp)
)

[Brian Norman]

Oh wow thats exactly what I needed, didn’t notice the alignment field 🤦‍♂️ Thanks!

[Oleksandr Balan]

Me neither until yesterday 😄
Found it when preparing slides about basic UI components 😅