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

CodePudding user response：

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