How to make all images from API be in one size in Jetpack Compose?

Question

I have the following composable that represents a list model -

@Composable
fun DashboardCard(
    modifier: Modifier = Modifier,
    model: DashboardCardModel,
    onCardClicked: (model: DashboardCardModel) -> Unit
) {

    Column(
        modifier = modifier
            .size(200.dp, 200.dp)
            .background(Color.Transparent)
            .padding(16.dp)
            .clickable {
                onCardClicked(model)
            },
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.SpaceAround
    ) {
        if (model.showDefaultThumbnail) {
            AsyncImage(
                modifier = Modifier
                    .size(90.dp)
                    .clip(RoundedCornerShape(10.dp)),
                model = model.thumbnailUrl, contentDescription = ""
            )
        } else {
            Image(
                modifier = Modifier
                    .size(90.dp)
                    .clip(RoundedCornerShape(10.dp)),
                painter =  painterResource(id = com.tinytap.R.drawable.tinytap),
                contentDescription = ""
            )
        }
        Image(
            modifier = Modifier
                .size(25.dp)
                .padding(top = 10.dp)
                .alpha(if (model.isCurrentPostOfInterest) 1f else 0f),
            painter = painterResource(id = com.tinytap.R.drawable.post_of_interest),
            contentDescription = null
        )
        Text(
            modifier = Modifier.padding(top = 10.dp),
            fontSize = 16.sp,
            color = Color.White,
            text = model.title,
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
        )
        Text(
            text = model.author,
            fontSize = 12.sp,
            color = Color.LightGray,
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
        )
    }
}

The issue is that I am using a fixed size for both my Image and AsyncImage but sometimes the API gives me images that are very wide, causing me to have the following inconsistency in the UI -

How can I make it that my images show up exactly the same? I tried using all kind of crops but the results ended up messing my image

Did you try `android:scaleType="centreCrop"` in the xml for the image? — Sambhav Khandelwal, Dec 20 '22 at 13:38
I am using Jetpack Compose and not XML. centerCrop is not available at Jetpack Compose — Alon Shlider, Dec 20 '22 at 15:15

score 2 · Accepted Answer · answered Dec 20 '22 at 19:19

Putting into consideration that image might be shorter, taller, wider or smaller. To solve this issue, I recommend you to use Coil here is a sample of code that will solve your issue :

 Card(
    modifier = Modifier.size(119.dp, 92.dp),
    shape = RoundedCornerShape(10.dp)
) {
    AsyncImage(
        model = ImageRequest.Builder(LocalContext.current)
            .data(imageURL)
            .build(),
        placeholder = painterResource(R.drawable.complex_placeholder),
        error = painterResource(R.drawable.complex_placeholder),
        contentDescription = "complex image",
        contentScale = ContentScale.Crop,//The line that will affect your image size and help you solve the problem.

        )
}

The above code will always show fully covered box with image for any case, also don't forget to determine size of container (Card in my example '119,92' ).

To know more about different attributes and their effect on your code, select what suits you the best

Check more here (reference of image attached) : Content scaletype fully illustrated

Thank you. The bottom line from your comment is that once I get an image with a certain size from my data source I can only work with the proportions of it and can't change them, so if I want them to fit perfectly without being messed up I need to change it at the data source level and not at my level at the Android device. — Alon Shlider, Dec 23 '22 at 15:03

How to make all images from API be in one size in Jetpack Compose?

1 Answers1