mori-atsushi / insetsx

WindowInsets utility for compose multiplatform

InsetsX [🚧 Work in progress 🚧]

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.

Setup

To use InsetsX, add the following dependency:

kotlin {
    /* ... */

    sourceSets {
        val commonMain by getting {
            dependencies {
                implementation("com.moriatsushi.insetsx:insetsx:0.1.0-alpha10")
            }
        }
    }
}

Android

1. (option) If you are using insets for IME support, set the activity's windowSoftInputMode to adjustResize in your AndroidManifest.xml file.

<activity
      android:name=".MyActivity"
      android:windowSoftInputMode="adjustResize">
</activity>

2. Call 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

iOS

1. (option) If you want to use the WindowInsetsController, use WindowInsetsUIViewController instead of ComposeUIViewController.

fun MainUIViewController(): UIViewController {
    return WindowInsetsUIViewController {
        MyApp()
    }
}

How to use

WindowInsets

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()
}

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

*1 is experimental

WindowInsetsController

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)
    }
}