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
andLocalConfiguration.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.