android-jetpack-composeimage-scalingmodifier

Trouble scaling basic Image in Compose

My problem is very simple. Yet I have been struggling for hours. Please end my insanity.

I have a row with a box in the middle. I want to put an image in the box and make it so the image touches the top and bottom of the box (Scales/fills vertically). I would also be okay with it filling the whole thing (even if the aspect ratio gets messed up). I want the actual blue image to stretch and fill to the top and bottom of the white box

Here is my code:

@Preview(device = "spec:width=1280dp,height=800dp,dpi=310")
@Composable
fun Preview(){
    Row(modifier = Modifier.fillMaxSize(), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.Center) {
        Box(modifier = Modifier
            .fillMaxSize(.5f).background(Color.Red)) {
                BadgeImage()
        }
    }
}

@Composable
fun BadgeImage() {
    Image(painter = painterResource(id = R.drawable.badge_blank),
        contentDescription = null,
        modifier = Modifier.background(Color.White),
        contentScale = ContentScale.FillHeight,
        )
}

I have tried countless modifiers on the Badge image composable. I have tried every contentScale.

I can't even get fill bounds to work. Please save me from my misery <3.

P.S. My image size is 2000 by 1200. Larger than my box I am trying to put it in.

Update: Here is my image

Solution

  • The issue is not in the code, but rather in the image itself. It has a transparent area around the actual image you're trying to adjust the bounds to. I recommend to import and use the image without the transparent area.

    I've managed to remove the transparent area of the image. Here is a link of the cropped image.