Screen width and height in Jetpack Compose

Question

I am wondering how to get the screen width and height with Jetpack Compose?

Is there any way you can retrieve the screen dimensions other than getWindowManager().getDefaultDisplay()?

Unwary

Answer 1

You can achieve this with LocalConfiguration.current:

@Composable
fun PostView() {
  val configuration = LocalConfiguration.current

  val screenHeight = configuration.screenHeightDp.dp
  val screenWidth = configuration.screenWidthDp.dp

  ...

}

Unwary

For some weird reason, LocalConfiguration is giving me screenWidth of landscape orientation even though I switched from Landscape to Portrait. Is anyone else facing this issue? – Homework

If you want to get the size in pixels: val screenDensity = configuration.densityDpi / 160f and multiply with dp, for example val screenHeight = configuration.screenHeightDp.toFloat() * screenDensity. You might want to round to a whole number as well. since px is Int. – Keven

Probably a better way to get the size in pixels: val density = LocalDensity.current; val configuration = LocalConfiguration.current; val screenWidthPx = with(density) {configuration.screenWidthDp.dp.roundToPx()} – Scripture

@AragornCrozier where does this .roundToPx() come from? – Danelledanete

@Danelledanete It's a function in Density.kt. – Bonin

Note, that "screenHeightDp" doesn't include insets as per documentation: "The height of the available screen space in dp units excluding the area occupied by window insets, such as the status bar, navigation bar, and cutouts." – Otterburn

Answer 2

SOLUTION

I am using this approach to get ScreenWidth and ScreenHeight. This works well for me and you can also use this for making responsive UI in Jetpack Compose

@Composable
fun ScreenSizeHelper() {
    
    val context = LocalContext.current

    val displayMetrics = context.resources.displayMetrics
    
    //Width And Height Of Screen
    val width = displayMetrics.widthPixels
    val height = displayMetrics.heightPixels

    //Device Density
    val density = displayMetrics.density
    
}

Barytone

Answer 3

Other workarounds include:-

A.) Declaring a BoxWithConstraints at the highest level of the hierarchy, then accessing the maxHeight and equivalent width attributes exposed inside the scope of the box

B.) Using custom layouts

Layout(
 content = { ... }
){ measurables, constraints ->
 //Exposes constraints.maxWidth, and a height equivalent
}

Slivovitz

Answer 4

I don't think it's the best way to do it but you can try this:

class Size {
    @Composable
    fun height(): Int {
        val configuration = LocalConfiguration.current
        return configuration.screenHeightDp
    }
    @Composable
    fun width(): Int {
        val configuration = LocalConfiguration.current
        return configuration.screenWidthDp
    }
}

and then use this values like that :

val size = Size()
val screenHeight = size.height()

Box(modifier = Modifier.height((screenHeigh/2).dp)) {
    //content
}

Kubetz

Answer 5

As stated here on this Android Docs:

"Because the composable is not a screen-level composable, we also should not use the current window metrics directly, in order to maximize reusability."

With BoxWithConstraints you will get the actual available size, not the full screen size.

It facilitates in some situation where you have paddings, for instance:

@Composable
fun Card(/* ... */) {
    BoxWithConstraints {
        if (maxWidth < 400.dp) {
            Column {
                //...
            }
        } else {
            Row{
              //...
            }
        }
    }
}

It gives you a maxWidth and a maxHeight to create your logic. More info here on this Android Docs.

Hope it helps!

Harridan

Answer 6

This code works for me

@Composable
fun displayMe(){
  val isTablet = ((LocalConfiguration.current.screenLayout
                 and Configuration.SCREENLAYOUT_SIZE_MASK)
                 >= Configuration.SCREENLAYOUT_SIZE_LARGE)
...
}

Imprescriptible