https://kotlinlang.org logo
#compose
Title
# compose
b

Brian Norman

05/18/2022, 1:03 PM
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:
Copy code
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
o

Oleksandr Balan

05/18/2022, 1:10 PM
Did you try tweak
contentScale
&
alignment
on your
Image
? See original, cropped with center alignment and cropped with bottom alignment:
Copy code
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)
)
b

Brian Norman

05/18/2022, 1:15 PM
Oh wow thats exactly what I needed, didn’t notice the alignment field 🤦‍♂️ Thanks!
👍 1
o

Oleksandr Balan

05/18/2022, 1:17 PM
Me neither until yesterday 😄 Found it when preparing slides about basic UI components 😅
🙌 1
8 Views