Facilitates responsive UI design by implementing Material 3 window size classes across multiple platforms, ensuring layouts adapt to various screen sizes. Supports Android, iOS, desktop, and web environments.
This library is now deprecated, as JetBrains have released their own version as part of Compose Multiplatform 1.7.0. See the tracking issue for more info.
The Material 3 Window size classes are a set of opinionated breakpoints, the window size at which a layout needs to change to match available space, device conventions, and ergonomics. All devices fall into one of three Material Design window size classes: compact, medium, or expanded. Rather than designing for an ever increasing number of display states, focusing on window class sizes ensures layouts work across a range of devices.
The androidx.compose.material3:material3-window-size-class library is available for Jetpack Compose, but it is not currently available for Compose Multiplatform. This library changes that, by providing the WindowSizeClass for many of the platforms supported by Compose Multiplatform.
Usage is very simple:
import androidx.compose.material3.windowsizeclass.calculateWindowSizeClass
@Composable
fun MyApplication() {
val windowSizeClass = calculateWindowSizeClass()
// Example of how to change the font size based on the screen width
val fontSize = when (windowSizeClass.widthSizeClass) {
WindowWidthSizeClass.Compact -> sp
WindowWidthSizeClass.Medium -> sp
-> sp
}
Column( ) {
Box (){
Image ()
Text (fontSize = fontSize)
}
}
}
You'll note that I have kept the package name the same as that in AndroidX. This is to enable easy migration for when support is added to Compose Multiplatform (tracking issue).
val commonMain by getting {
dependencies {
implementation("dev.chrisbanes.material3:material3-window-size-class-multiplatform:0.5.0")
}
}
Copyright 2022 The Android Open Source Project
Portions 2023 Christopher Banes
Licensed under the Apache License, Version 2.0 (the "License");
you may use except compliance the License.
You may obtain a copy of the License at
https:
Unless applicable law agreed to writing, software
distributed under the License distributed an BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express implied.
See the License the specific language governing permissions
limitations under the License.
| Platform | Supported | Sample |
|---|
| Android | ✅ | android-app |
| iOS | ✅ | ios-app |
| Desktop (JVM) | ✅ | desktop-app |
| Web | ✅ (experimental) | web-js-app web-wasm-app |
Surfaced from shared tags and platforms — no rankings paid for.