Screen Width and Height

[shubhamkodes]

How to get screen width and height for Ios and Android in common module in compose Multiplatform.
I have tried to get through LocalConfiguration, but it's not available in compose multiplatform.
So how to I achieve width and height of screen for Android and Ios, if I'm designing whole Ui in common module.

[m-sasha]

On the desktop (JVM) you can use java.awt.Toolkit.getDefaultToolkit().getScreenSize().

[ShoaibKakal]

With the help of expect/actual, you can use LocalConfiguration.current.screenWidthDp on Android and LocalWindowInfo.current.containerSize on non-Android (starting from 1.5.10-beta01).

[sureshmaidaragi1919]

I am getting the following error when I run Android app
Unresolved reference: containerSize

[m-sasha]

WindowInfo.currentSize is not available on Android. You need to use expect/actual like @ShoaibKakal suggested.

[yuroyami]

@sureshmaidaragi1919 As @ShoaibKakal and @m-sasha suggested, you need to use expect/actual for this functionality to work. Here's my own implementation:

commonMain :

/** Getting screen size info for UI-related calculations */
data class ScreenSizeInfo(val hPX: Int, val wPX: Int, val hDP: Dp, val wDP: Dp)

@Composable expect fun getScreenSizeInfo(): ScreenSizeInfo

androidMain :

@Composable
actual fun getScreenSizeInfo(): ScreenSizeInfo {
    val density = LocalDensity.current
    val config = LocalConfiguration.current
    val hDp = config.screenHeightDp.dp
    val wDp = config.screenWidthDp.dp

    return remember(density, config) {
        ScreenSizeInfo(
            hPX = with(density) { hDp.roundToPx() },
            wPX = with(density) { wDp.roundToPx() },
            hDP = hDp,
            wDP = wDp
        )
    }
}

iosMain :

@OptIn(ExperimentalComposeUiApi::class)
@Composable
actual fun getScreenSizeInfo(): ScreenSizeInfo {
    val density = LocalDensity.current
    val config = LocalWindowInfo.current.containerSize


    return remember(density, config) {
        ScreenSizeInfo(
            hPX = config.height,
            wPX = config.width,
            hDP = with(density) { config.height.toDp() },
            wDP = with(density) { config.width.toDp() }
        )
    }
}

[sureshmaidaragi1919]

wow thanks a ton @yuroyami

[pablichjenkov]

You can also use a Layout as your root Composable and obtain the size from the passed constraints. This solution doesn't depend on platform implementations and also gives you the exact size given to your Composable which could be different from the device screen size in some cases.
Once you have that size can use a CompositionLocal to pass it down the composable tree

[yuroyami]

@pablichjenkov The usage of BoxWithConstraints does work, unless you need instantaneous calculation before any composable inflates itself within constrains. Sometimes, one needs to retrieve the screen width/height at once before any composition takes place, which is not possible via this solution. It's still viable for many cases though.

[pablichjenkov]

@yuroyami
You can use BoxWithConstraint but I meant to say a custom Layout. BoxWithConstraint uses SubcomposeLayout and it can cause performance issues plus the fact you mentioned.
I meant to say a custom Layout that simply grabs the size from the passed constraints and sets a CompositionLocal with such values. I don't think a Layout would have the problem you mentioned.

[roys]

@pablichjenkov: Do you have a link to an example using a custom Layout? I haven't been able to figure out how to set it up like you describe.

[pablichjenkov]

Check this out:
https://github.com/pablichjenkov/component-toolkit/blob/master/component-toolkit/src/commonMain/kotlin/com/macaosoftware/component/adaptive/AdaptiveSizeComponent.kt#L147
Credits to this stackoverflow question and the guy who answered it:
https://stackoverflow.com/questions/73354911/how-to-get-exact-size-without-recomposition

[roys]

Thank you so much, @pablichjenkov. Now I finally got it. 🙌

[MrBzik]

Very strange but simply addressing containerSize causes my whole UI to break / freeze (compose func that called the method)

@OptIn(ExperimentalComposeUiApi::class)
@Composable
actual fun getWindowHeight() : Int {
    val size = LocalWindowInfo.current.containerSize.height
    // Not being used at all
    return 10
}