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

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

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

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