Window Insets In Jetpack Compose.

Photo by R Mo on Unsplash

In this article we will be talking about Window Insets in Jetpack Compose.

Window Insets is nothing it just provides the information about the System UI such as Status and Navigation Bar so that our app’s ui not overlapped on those areas.

As you can see in the above video we have a status and navigation bar and we definitely don’t want to show our UI’s on those areas. So with the help of Window Insets we will get the information about system ui and start rendering our ui after that.

Let’s understand by the example

Suppose you want to use full window of mobile screen. To use of this you have to make some changes in the code.

First make the status bar and navigation bar transparent. Go to you theme.kt file and make them transparent.

if (!view.isInEditMode) {
    val transparent = Color(0xFF00000000)

    SideEffect {
        val window = (view.context as Activity).window
// transparent status and navigation bar 
        window.statusBarColor = transparent.toArgb()
        window.navigationBarColor = transparent.toArgb()
        WindowCompat.getInsetsController(window…