Android Jetpack Compose - Image can't scale to box's width and Height

Question

Created ImageCard view for creating the list in android jetpack compose but some images can't scratch to Box widget's width and height.

Using 640*427 image and output like image 1.
Using 6720*4480 image and it's looking good like image 2.

Use below code to create ImageCard.

Usage of ImageCard function: Call ImageCardData function in setContent{} function

@Composable
fun ImageCard(
    painter: Painter,
    title: String,
    contentDescription: String,
    modifier: Modifier = Modifier
) {
    Card(
        modifier = modifier.fillMaxWidth(),
        shape = RoundedCornerShape(10.dp),
        elevation = 5.dp
    ) {
        Box(
            modifier = Modifier.height(200.dp)
        ) {
            Image(
                painter = painter,
                contentDescription = contentDescription,
                contentScale = ContentScale.Crop
            )
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .background(
                        brush = Brush.verticalGradient(
                            colors = listOf(
                                Color.Transparent,
                                Color.Black
                            ),
                            startY = 50f
                        )
                    )
            )
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(12.dp),
                contentAlignment = Alignment.BottomStart
            ) {
                Text(
                    text = title,
                    style = TextStyle(color = Color.White, fontSize = 16.sp)
                )
            }
        }
    }
}

@Composable
fun ImageCardData() {
    val painter = painterResource(id = R.drawable.engagement)
    val title = "Sample Text Title"
    val description = "This is sample Image Description"
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        ImageCard(
            painter = painter,
            title = title,
            contentDescription = description
        )
    }
}

user_3585796 · Answer

Your image view size gets calculated by it content, because it doesn't have any size modifiers.

Add fillMaxSize to the image:

Image(
    painter = painter,
    contentDescription = contentDescription,
    contentScale = ContentScale.Crop,
    modifier = Modifier.fillMaxSize()
)

user_2016562 · Answer

It depends by the Image implementation with a Painter

Creates a composable that lays out and draws a given Painter. This will attempt to size the composable according to the Painter's intrinsic size. However, an optional Modifier parameter can be provided to adjust sizing or draw additional content (ex. background)

It means that using an 640*427 image in a parent container with larger dimensions the Image composable size is the original size of the Painter.
The scale factor applied by the ContentScale is based on these dimensions and source = destination and doesn't change the intrinsic size of the original Painter.

Image(
  painter = painter,
  contentDescription = contentDescription,
  contentScale = ContentScale.Crop
)

Using a 6720*4480 image the Image size is larger than the parent container and in this way the Image composable fills all the available space.

In your case you can solve using the modifier fillMaxWidth() in your Image

Image(
  modifier =Modifier.fillMaxWidth(),
  painter = painter,
  contentDescription = contentDescription,
  contentScale = ContentScale.Crop
)

In this way the Image composable fills the parent space.

Android Jetpack Compose - Image can't scale to box's width and Height

2 Answers