DEV Community

myougaTheAxo
myougaTheAxo

Posted on

Responsive Layouts: Landscape and Tablet Support with WindowSizeClass

#android #kotlin #compose #tutorial

Supporting multiple screen sizes is essential. WindowSizeClass provides a consistent way to adapt layouts for phones, tablets, and landscape orientations.

Add Dependency 

implementation("androidx.compose.material3:material3-window-size-class:1.1.0")
Enter fullscreen mode Exit fullscreen mode

Create Responsive Layout State 

import androidx.compose.material3.windowsizeclass.WindowSizeClass

data class WindowSize(val widthSizeClass: WindowWidthSizeClass, val heightSizeClass: WindowHeightSizeClass)

@Composable
fun rememberWindowSizeClass(): WindowSize {
    val widthDp = LocalConfiguration.current.screenWidthDp.dp
    val heightDp = LocalConfiguration.current.screenHeightDp.dp

    return WindowSize(
        widthSizeClass = when {
            widthDp < 600.dp -> WindowWidthSizeClass.Compact
            widthDp < 840.dp -> WindowWidthSizeClass.Medium
            else -> WindowWidthSizeClass.Expanded
        },
        heightSizeClass = when {
            heightDp < 480.dp -> WindowHeightSizeClass.Compact
            heightDp < 900.dp -> WindowHeightSizeClass.Medium
            else -> WindowHeightSizeClass.Expanded
        }
    )
}
Enter fullscreen mode Exit fullscreen mode

Two-Pane Layout Implementation 

@Composable
fun ContentScreen(windowSize: WindowSize) {
    when (windowSize.widthSizeClass) {
        WindowWidthSizeClass.Compact -> {
            Column { ListPane(); DetailPane() }
        }
        WindowWidthSizeClass.Medium, WindowWidthSizeClass.Expanded -> {
            Row { ListPane(modifier = Modifier.weight(0.4f)); DetailPane(modifier = Modifier.weight(0.6f)) }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Adaptive Navigation 

@Composable
fun AdaptiveNav(windowSize: WindowSize) {
    when (windowSize.widthSizeClass) {
        WindowWidthSizeClass.Compact -> {
            BottomAppBar { NavigationBar() }
        }
        else -> {
            PermanentNavigationDrawer { NavigationRail() }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

WindowSizeClass replaces the deprecated DisplayFeatures approach. It handles foldables, tablets, and landscape seamlessly with responsive breakpoints.

8 Android app templates (Habit Tracker, Budget Manager, Task Manager, and more) available on Gumroad

Top comments (0)