I have a Kotlin Multiplatform project that runs well on Android and iOS phones. I have tried to adjust the layout for iPads to make it look a bit "less ugly", by reducing the layout width to make it similar to phone screen widths.
When I reduce fillMaxWidth of my main layout column to about 0.7, it does reduce it, but it is always displayed towards the left margin of the screen. I cannot get the column to display centred.
Row(horizontalArrangement = Arrangement.Center) {
Column(
modifier = Modifier.fillMaxHeight()
.fillMaxWidth(if (platform.name.substring(1, 2) == "P") 0.7f else 1f),
//check if running iPad
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Top
)
{
Spacer(modifier = Modifier.height(if (platform.isAndroid) 80.dp else 120.dp))
cont()
}
}
I have even wrapped the column in a Row with central horizontalArrangement. Everything is still bunched up against the left side of screen.
This is what I get: Badly aligned column
This is what I'm trying to get: Centred column (For the purposes of demonstration, I am achieving some degree of centering with a manual offset, but this is not a reliable solution given varying screen widths of different iPads.)
Am I missing some basic steps in getting a Jetpack Compose column that is less than full width of the screen to be arranged in the horizontal midline?