A New Way Retrieving Window Information in Android with Jetpack Compose
In recent years, Android has been evolved more on Adaptive UI. It is considered as a best practise to design Screens that can adapt to different screen sizes and orientations. Of course there has been multiple ways to implement an adaptive UI in Android. But with Jetpack libraries, it has become more easier to implement adaptive UI. Jetpack compose introduced Window size classes to get the information about the current window size. By determining the window size class we can adapt the UI to different screen sizes and orientations.
For the details about window size classes, refer to the official documentation from here
In the past, you had to write something like the following code to determine the window size class:
enum class WindowSizeClass { COMPACT, MEDIUM, EXPANDED }
fun computeWindowSizeClasses() {
val widthDp = //... from WindowMetricsCalculator
val widthWindowSizeClass = when {
widthDp < 600f -> COMPACT
widthDp < 840f -> MEDIUM
else -> EXPANDED
}
val heightDp = //... from WindowMetricsCalculator
val heightWindowSizeClass = when {
heightDp < 480f -> COMPACT
heightDp < 900f -> MEDIUM
else -> EXPANDED
}
// Use widthWindowSizeClass and heightWindowSizeClass.
}Or may be you had to write something like the following code to determine the window size class:
@Composable
fun MyScreen() {
val witdh = // retrieve the width of the screen
if (witdh < 600.dp) {
// compact layout
} else if (witdh < 840.dp) {
// medium layout
} else {
// expanded layout
}
}This seems to be doable and maintainable. But with Jetpack Compose, it has become more easier to determine the window size class. Jetpack Compose introduced a new way to retrieve the window information. Let’s see how we can retrieve the window information in Jetpack Compose.
Retrieve Window Information
Retrieving the window information in Jetpack Compose is simply a one liner.
val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClassafter that we can just control the UI based on the window size class.
when(windowSizeClass.windowWidthSizeClass) {
WindowWidthSizeClass.COMPACT -> {...}
WindowWidthSizeClass.MEDIUM -> {...}
WindowWidthSizeClass.EXPANDED -> {...}
}
when(windowSizeClass.windowHeightSizeClass) {
WindowHeightSizeClass.COMPACT -> {...}
WindowHeightSizeClass.MEDIUM -> {...}
WindowHeightSizeClass.EXPANDED -> {...}
}With this new way of retrieving window information, it has become more easier to implement adaptive UI in Android with Jetpack Compose. We are no longer required to write the boilerplate code to determine the window size class. We can just retrieve the window information with a single line of code and control the UI based on the window size class.
Another advantage of this approach is that ‘currentWindowAdaptiveInfo’ updates when then window size changes. Meaning that If the window size changes, the ‘currentWindowAdaptiveInfo’ will be updated accordingly. So that we can adapt the UI to different screen sizes and orientations.
Conclusion
In this article, we have seen a new way of retrieving window information in Android with Jetpack Compose. With this new way, it has become more easier to implement adaptive UI in Android. We are no longer required to write the boilerplate code to determine the window size class. We can just retrieve the window information with a single line of code and control the UI based on the window size class. This new way of retrieving window information is more maintainable and adaptive to different screen sizes and orientations.
I suggest you to try this new way of retrieving window information in your next Jetpack Compose project. I hope you find this article helpful. If you have any queries or feedback, feel free to comment below. Thank you for reading.
