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,
)
}
}
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
)
}
}
}