Problems with Jetpack Compose Horizontal Column Alignment

81 views Asked by At

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?

0

There are 0 answers