DEV Community

myougaTheAxo
myougaTheAxo

Posted on

Multi-Screen Size Support in Jetpack Compose

#android #kotlin #jetpackcompose #responsive

Compose makes responsive design straightforward with configuration-based adaption.

WindowType Detection

Use LocalConfiguration.current to detect screen size:

val configuration = LocalConfiguration.current
val isPhone = configuration.screenWidthDp < 600
val isTablet = configuration.screenWidthDp >= 600
val isLandscape = configuration.orientation == Configuration.ORIENTATION_LANDSCAPE
Enter fullscreen mode Exit fullscreen mode

Responsive Layouts

Create different layouts for phone vs tablet:

@Composable
fun MyScreen() {
    val windowType = rememberWindowType()

    when (windowType) {
        WindowType.Phone -> PhoneLayout()
        WindowType.Tablet -> TabletLayout()
        WindowType.ExpandedTablet -> ExpandedTabletLayout()
    }
}
Enter fullscreen mode Exit fullscreen mode

Dynamic Padding & Spacing

Adjust padding based on screen size:

val basePadding = if (isTablet) 24.dp else 16.dp
Box(Modifier.padding(basePadding))
Enter fullscreen mode Exit fullscreen mode

Responsive Typography

Scale font sizes for different devices:

val fontSize = if (isPhone) 14.sp else 18.sp
Text("Title", fontSize = fontSize)
Enter fullscreen mode Exit fullscreen mode

Preview for Multiple Devices

Test all screen sizes in Android Studio:

@Preview(name = "Phone", widthDp = 360, heightDp = 800)
@Preview(name = "Tablet", widthDp = 820, heightDp = 1180)
@Preview(name = "Foldable", widthDp = 408, heightDp = 1920)
@Composable
fun MyScreenPreview() {
    MyScreen()
}
Enter fullscreen mode Exit fullscreen mode

Orientation Detection

Handle device rotation:

val isPortrait = configuration.orientation == Configuration.ORIENTATION_PORTRAIT

if (isPortrait) {
    PortraitLayout()
} else {
    LandscapeLayout()
}
Enter fullscreen mode Exit fullscreen mode

Build once, display everywhere with Compose's responsive capabilities.

8 production-ready Android app templates on Gumroad.

Browse templates → Gumroad

Top comments (0)