Jetpack compose: How to get screen width height in dp

Jetpack Compose: Getting Screen Width and Height in dp

This code demonstrates how to retrieve the screen width and height of an Android device in dp units using Jetpack Compose. It achieves this by leveraging the LocalConfiguration composable and its properties. Let's break down the code step-by-step.

1. Accessing Screen Information:

The MainContent composable retrieves the current device configuration using LocalConfiguration.current. This provides access to various device attributes, including screen dimensions. From this configuration object, the code extracts the screenWidthDp and screenHeightDp properties which represent the screen width and height in dp units, respectively.

2. Displaying Screen Dimensions:

A Box composable is used to center the content within the available space. Inside the Box, a Text composable displays the retrieved screen width and height values. String formatting is used to combine these values with descriptive labels and a newline character for better readability.

Summary:

This code snippet showcases a simple yet effective approach to obtaining the screen dimensions in dp units within a Jetpack Compose application. By utilizing LocalConfiguration, the code retrieves the necessary information without directly accessing the window metrics, promoting reusability and avoiding potential issues. This allows for creating responsive layouts that adapt to different screen sizes.

MainActivity.kt


package com.cfsuman.jetpackcompose

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.graphics.Color
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.sp


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {GetScaffold()}
    }


    @Composable
    fun GetScaffold() {
        Scaffold(
            topBar = {TopAppBar(
                title = {Text(text = "Compose - Screen Width Height In Dp")},
                backgroundColor = Color(0xFF5F9EA0),
            )},
            content = { MainContent() },
            backgroundColor = Color(0xFFA7D8DE)
        )
    }


    @Composable
    fun MainContent() {
        val configuration = LocalConfiguration.current
        val screenWidth = configuration.screenWidthDp
        val screenHeight = configuration.screenHeightDp

        Box(Modifier.fillMaxSize().wrapContentSize(Alignment.Center)) {
            Text(
                text = "Screen Width : $screenWidth Dp" +
                        "\nScreen Height: $screenHeight Dp",
                fontSize = 27.sp,
                textAlign = TextAlign.Center
            )
        }
    }
}