Unified interface for handling WindowInsets across iOS and Android in Compose Multiplatform. Includes utilities for padding, system bars, status bars, navigation bars, IME support, and changing system bar colors.
InsetsX provides a WindowInsets utility for Compose Multiplatform.
The goal is to have a unified interface for handling WindowInsets across iOS and Android.
Once the official library supports WindowInsets, this library will be archived.
To use InsetsX, add the following dependency:
kotlin {
/* ... */
sourceSets {
val commonMain by getting {
dependencies {
implementation("com.moriatsushi.insetsx:insetsx:0.1.0-alpha10")
}
}
}
}
windowSoftInputMode to adjustResize in your AndroidManifest.xml file.<activity
android:name=".MyActivity"
android:windowSoftInputMode="adjustResize">
</activity>
WindowCompat.setDecorFitsSystemWindows() with false in the onCreate method of the activity .override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
WindowCompat.setDecorFitsSystemWindows(window, false)
}
Detail: Lay out your app within window insets
WindowInsetsController, use WindowInsetsUIViewController instead of ComposeUIViewController.fun MainUIViewController(): UIViewController {
return WindowInsetsUIViewController {
MyApp()
}
}
This works much like Android's WindowInsets. Please note that the package name is different.
import androidx.compose.foundation.layout.windowInsetsPadding
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import com.moriatsushi.insetsx.systemBars
import com.moriatsushi.insetsx.systemBarsPadding
@Composable
fun Sample() {
val modifier1 = Modifier
.windowInsetsPadding(WindowInsets.safeDrawing)
val modifier2 = Modifier
.safeDrawingPadding()
}
*1 is experimental
WindowInsetsController can be used to change colors of system bars.
@Composable
fun Sample() {
val windowInsetsController = rememberWindowInsetsController()
LaunchedEffect(Unit) {
// The status bars icon + content will change to a light color
windowInsetsController?.setStatusBarContentColor(dark = false)
// The navigation bars icons will change to a light color (android only)
windowInsetsController?.setNavigationBarsContentColor(dark = false)
}
}
You can also hide WindowInsets.
@Composable
fun Sample() {
val windowInsetsController = rememberWindowInsetsController()
LaunchedEffect(Unit) {
// Hide the status bars
windowInsetsController?.setIsStatusBarsVisible(false)
// Hide the navigation bars
windowInsetsController?.setIsNavigationBarsVisible(false)
// Change an options for behavior when system bars are hidden
windowInsetsController?.setSystemBarsBehavior(SystemBarsBehavior.Immersive)
}
}
| API | android | ios |
|---|
| WindowInsets.safeArea | system bars + display cutouts | SafeArea |
| WindowInsets.systemBars | status bar + navigation bar | home indicator + status bar |
| WindowInsets.navigationBars | navigation bar | home indicator |
| WindowInsets.statusBars | status bar | status bar |
| WindowInsets.ime *1 | software keyboard | software keyboard |
| WindowInsets.safeDrawing *1 | system bars + software keyboard | SafeArea + software keyboard |
| (Modifier) | ||
| Modifier.safeAreaPadding() | system bars + display cutouts | SafeArea |
| Modifier.systemBarsPadding() | status bar + navigation bar | home indicator + status bar |
| Modifier.navigationBarsPadding() | navigation bar | home indicator |
| Modifier.statusBarsPadding() | status bar | status bar |
| Modifier.imePadding() *1 | software keyboard | software keyboard |
| Modifier.safeDrawingPadding() *1 | system bars + software keyboard | SafeArea + software keyboard |
Surfaced from shared tags and platforms — no rankings paid for.