HorizontalPager Images are not in equal size in jetpack compose

Question

I want to make same Image size in all pages of HorizontalPager. I am manually added size in Image and it looks perfect. I want to remove the specific size, so is it possible to do in jetpack compose?

HorizontalPager(
    count = 5,
    state = pagerState,
) { currentPage ->
    Column(horizontalAlignment = Alignment.CenterHorizontally) {
        Column(
            Modifier.height(height = 428.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            Image(
                modifier = Modifier
                    .size(280.dp)
                    .padding(top = 80.dp),
                painter = painterResource(imageResId),
                contentDescription = null,
                contentScale = ContentScale.Fit,
            )
            Text(
                modifier = Modifier.padding(top = 20.dp),
                text = "Xyz",
            )
            Text(
                modifier = Modifier.padding(top = 20.dp),
                text = "description",
                textAlign = TextAlign.Center,
            )
        }
        HorizontalPagerIndicator(
            modifier = Modifier
                .padding(top = 80.dp),
            pagerState = pagerState,
            activeColor = Teal,
            inactiveColor = Platinum,
        )
    }
}

score 2 · Accepted Answer · answered Feb 16 '23 at 03:54

Image uses intrinsic size of Bitmap/Painter, parent Constraints or dimensions in simple manner and ContentScale to draw a resource.

Based on image resource aspect ratios they are to be fit inside an Image constrained with 428.dp minus size of other Text composables, this is the biggest height Image can get based on its inner calculations. Simple solution for this is to match one dimension of Image to parent and using Modifier.aspectRatio to have all images have same dimensions without setting a fixed size modifier.

These 2 png files have different aspect ratios and drawn as

@Preview
@Composable
private fun Test(){
    Column(modifier = Modifier.fillMaxSize()) {
        Column(modifier = Modifier.height(200.dp).border(2.dp, Color.Red)) {
            Image(
                painter = painterResource(id = R.drawable.landscape11),
                contentDescription = null,
                contentScale = ContentScale.Fit
            )
        }

        Column(modifier = Modifier.height(200.dp).border(2.dp, Color.Green)) {
            Image(
                painter = painterResource(id = R.drawable.landscape3),
                contentDescription = null,
                contentScale = ContentScale.Fit
            )
        }
    }
}

After setting aspect ratio modifier

@Preview
@Composable
private fun Test(){
    Column(modifier = Modifier.fillMaxSize()) {
        Column(modifier = Modifier.height(200.dp).border(2.dp, Color.Red)) {
            Image(
                modifier = Modifier.aspectRatio(4/3f),
                painter = painterResource(id = R.drawable.landscape11),
                contentDescription = null,
                contentScale = ContentScale.Fit
            )
        }

        Column(modifier = Modifier.height(200.dp).border(2.dp, Color.Green)) {
            Image(
                modifier = Modifier.aspectRatio(4/3f),
                painter = painterResource(id = R.drawable.landscape3),
                contentDescription = null,
                contentScale = ContentScale.Fit
            )
        }
    }
}

HorizontalPager Images are not in equal size in jetpack compose

1 Answers1