CODEWITHSUNDEEP
androidandroid-jetpack-compose
AbdulMomen عبدالمؤمن
AbdulMomen عبدالمؤمن

Reputation: 22457

Screen width and height in Jetpack Compose

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()?

Upvotes: 136

Views: 113099

Answers (6)

Chirag Thummar
Chirag Thummar

Reputation: 3242

To get the screen width and height in pixels, I am using this approach. 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       
}

Upvotes: 22

Geraldo Neto
Geraldo Neto

Reputation: 4040

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!

Upvotes: 5

Scott LaHay
Scott LaHay

Reputation: 47

This code works for me

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

Upvotes: -2

user20197752
user20197752

Reputation:

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
}

Upvotes: 10

Richard Onslow Roper
Richard Onslow Roper

Reputation: 6863

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
}

Upvotes: 9

AbdulMomen عبدالمؤمن
AbdulMomen عبدالمؤمن

Reputation: 22457

You can achieve this with LocalConfiguration.current:

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

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

  ...

}

Upvotes: 281

Related Questions