How to Get Device Size in Jetpack Compose with Kotlin

In Jetpack Compose, just like in Flutter, you can create responsive user interfaces by utilizing device screen size. In Flutter, you might use MediaQuery.of(context).size to get the screen dimensions, but in Jetpack Compose, you can achieve this using LocalConfiguration and LocalDensity to access screen size, pixel density, and other display metrics.

This guide will show you how to get the device screen size in Jetpack Compose and use it to design responsive UIs.

1. Using LocalConfiguration to Get Screen Size

The LocalConfiguration object in Jetpack Compose provides access to screen dimensions such as width, height, and density-independent pixels (dp). You can easily access these values to adjust your UI based on the device’s screen size.

Example: Get Screen Width and Height

import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.material3.Text
import androidx.compose.foundation.layout.Column

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

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

    Column {
        Text(text = "Screen Width: $screenWidth dp")
        Text(text = "Screen Height: $screenHeight dp")
    }
}

In the example above:

• configuration.screenWidthDp provides the screen width in density-independent pixels (dp).
• configuration.screenHeightDp gives the screen height in dp.

2. Using LocalDensity to Convert to Pixels

If you need the screen size in pixels (px) rather than dp, you can use LocalDensity to convert dp values into pixels. This is useful when you want to perform pixel-based operations or need precise control over UI elements.

Example: Convert dp to Pixels

import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.material3.Text
import androidx.compose.foundation.layout.Column

@Composable
fun ScreenSizeWithDensityExample() {
    val configuration = LocalConfiguration.current
    val density = LocalDensity.current.density

    val screenWidthDp = configuration.screenWidthDp // in dp
    val screenHeightDp = configuration.screenHeightDp // in dp

    // Convert dp to pixels
    val screenWidthPx = screenWidthDp * density
    val screenHeightPx = screenHeightDp * density

    Column {
        Text(text = "Screen Width: $screenWidthDp dp ($screenWidthPx px)")
        Text(text = "Screen Height: $screenHeightDp dp ($screenHeightPx px)")
    }
}

In this example, we multiply the dp values by the device density to get the equivalent pixel values. This method is helpful when working with devices that have different pixel densities.

3. Creating a Responsive UI Using Screen Size

Now that you have access to the device's screen dimensions, you can use them to design responsive UI components. By adjusting the size of UI elements based on the screen width or height, you can ensure your app looks great on any device.

Example: Responsive Button

import androidx.compose.ui.Modifier
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment

@Composable
fun ResponsiveButton() {
    val configuration = LocalConfiguration.current
    val screenWidth = configuration.screenWidthDp

    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        Button(
            modifier = Modifier.width((screenWidth * 0.6).dp), // Button width is 60% of screen width
            onClick = { /* Handle button click */ }
        ) {
            Text("Click Me")
        }
    }
}

In this example:

• The button width is set to 60% of the screen width (screenWidth * 0.6), making the button size responsive.
• As the screen width changes, the button will resize accordingly.

Summary

To get the screen size in Jetpack Compose:

• Use LocalConfiguration.current.screenWidthDp and LocalConfiguration.current.screenHeightDp to get the width and height in dp.
• For pixel-based calculations, multiply the dp values by LocalDensity.current.density to convert them to pixels.

With these tools, you can create responsive UIs that adapt to various screen sizes, providing a seamless experience across different devices.