Handling Window Insets: Status & Navigation Bars in Android XML Layouts with Kotlin

When developing Android applications using XML layouts and Kotlin, properly handling window insets is crucial for creating immersive and user-friendly experiences. Window insets refer to the system-provided paddings around the edges of the application window, typically used for the status bar, navigation bar, and cutout areas (notches). These insets ensure that your app’s content doesn’t overlap with system UI elements.

What are Window Insets?

Window insets are the areas of the screen occupied by system UI elements like the status bar, navigation bar, and display cutouts. The Android system provides these insets to apps so they can adjust their layouts accordingly to avoid overlapping with these elements.

Why Handle Window Insets?

• Avoid UI Overlap: Prevents content from being hidden behind system bars.
• Improve User Experience: Ensures that your app integrates seamlessly with the device’s UI.
• Consistency: Creates a uniform look and feel across different devices.

How to Handle Window Insets in XML Layouts with Kotlin

Step 1: Add implementation Dependency

If you haven’t already, ensure you have the core-ktx dependency. Most new projects automatically include this, but verify in your build.gradle file:

dependencies {
    implementation("androidx.core:core-ktx:1.9.0")
}

Step 2: Enable android:fitsSystemWindows="true"

In your root layout XML, add android:fitsSystemWindows="true". This attribute tells the view to take the system window insets into account when laying out its content.

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:fitsSystemWindows="true">

    <!-- Your app content here -->

</LinearLayout>

Note: Setting fitsSystemWindows to true on the root layout provides basic insets handling but can sometimes lead to unintended padding. A more precise approach often involves using the ViewCompat APIs for custom inset handling.

Step 3: Implement Custom Inset Handling Using ViewCompat

For more granular control, you can use ViewCompat.setOnApplyWindowInsetsListener. This allows you to programmatically handle window insets in your Kotlin code.

import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat
import androidx.core.view.updatePadding
import com.example.yourapp.R // Replace with your package

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val myView: View = findViewById(R.id.your_view) // Replace with your view's ID

        ViewCompat.setOnApplyWindowInsetsListener(myView) { view, insets ->
            val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())

            view.updatePadding(
                left = systemBars.left,
                top = systemBars.top,
                right = systemBars.right,
                bottom = systemBars.bottom
            )

            WindowInsetsCompat.CONSUMED
        }
    }
}

In this code:

• findViewById(R.id.your_view): Replaces R.id.your_view with the actual ID of the view you want to adjust. This is usually the top-level container within your layout that you want to extend under the system bars. If you’re targeting the entire activity content, it might be your root LinearLayout, ConstraintLayout, or other root view group.
• ViewCompat.setOnApplyWindowInsetsListener: Sets a listener to be called when window insets change.
• insets.getInsets(WindowInsetsCompat.Type.systemBars()): Retrieves the insets for system bars (status bar and navigation bar).
• view.updatePadding: Updates the padding of the view with the system bar insets, effectively shifting the view’s content to avoid overlapping with system bars.
• WindowInsetsCompat.CONSUMED: Indicates that the insets have been handled and should not be passed further down the view hierarchy.

Step 4: Handling Different Inset Types

Android provides various types of insets, such as:

• WindowInsetsCompat.Type.statusBars(): Insets for the status bar.
• WindowInsetsCompat.Type.navigationBars(): Insets for the navigation bar.
• WindowInsetsCompat.Type.systemBars(): Combination of status bar and navigation bar insets.
• WindowInsetsCompat.Type.ime(): Insets for the Input Method Editor (IME), i.e., the keyboard.
• WindowInsetsCompat.Type.displayCutout(): Insets representing the display cutout (notch).

You can handle each of these separately based on your application’s needs. For instance, you might only need to adjust the top padding for the status bar and bottom padding for the navigation bar. Here’s an example demonstrating how to apply top padding specifically for the status bar:

import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat
import androidx.core.view.updatePadding
import com.example.yourapp.R // Replace with your package

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val myView: View = findViewById(R.id.your_view) // Replace with your view's ID

        ViewCompat.setOnApplyWindowInsetsListener(myView) { view, insets ->
            val statusBarInsets = insets.getInsets(WindowInsetsCompat.Type.statusBars())

            view.updatePadding(
                top = statusBarInsets.top // Apply top padding only
            )

            WindowInsetsCompat.CONSUMED
        }
    }
}

Step 5: Use setOnApplyWindowInsetsListener on the Correct Views

Apply setOnApplyWindowInsetsListener selectively to specific views instead of the entire screen (if appropriate). This ensures you only adjust padding/margins where necessary.
For instance, you might want the content to extend under the status and navigation bars, but the toolbar needs to respect the insets.

//To extend content under system bars, apply insets to content view:

val contentView = findViewById<View>(R.id.content_view)
ViewCompat.setOnApplyWindowInsetsListener(contentView) { view, insets ->
   //Handle extending the view
    WindowInsetsCompat.CONSUMED
}

//And apply different insets for Toolbar
val toolbar = findViewById<Toolbar>(R.id.toolbar)
ViewCompat.setOnApplyWindowInsetsListener(toolbar) { view, insets ->
    val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())

    view.updatePadding(
       left = systemBars.left,
        top = systemBars.top,
        right = systemBars.right
    )

    WindowInsetsCompat.CONSUMED
}

Step 6: Immersive Mode

To achieve a truly immersive experience, you might want to hide the system bars completely. However, be cautious, as users may find it frustrating if there’s no easy way to bring them back. Here’s how to hide the system bars using WindowInsetsControllerCompat

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.WindowCompat
import androidx.core.view.WindowInsetsCompat
import androidx.core.view.WindowInsetsControllerCompat

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Hide the status bar and navigation bar
        val windowInsetsController = WindowCompat.getInsetsController(window, window.decorView)
        // Configure the behavior of the hidden system bars
        windowInsetsController.systemBarsBehavior = WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
        // Initially hide the system bars
        windowInsetsController.hide(WindowInsetsCompat.Type.systemBars())

    }
}

Breakdown of Code:

• Retrieve the Insets Controller:
• WindowCompat.getInsetsController(window, window.decorView): Retrieves an instance of WindowInsetsControllerCompat. This class provides APIs to control the visibility and behavior of system bars (status bar and navigation bar).
• Set the System Bars Behavior:
• windowInsetsController.systemBarsBehavior = WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE:
  This line configures how the system bars should behave when they are hidden.
  The BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE flag means the bars will appear temporarily (transiently) when the user swipes near the edge of the screen where the bars would normally be. They will then automatically hide again after a short period. Other options exist to keep bars always hidden or visible.
• Hide the System Bars:
• windowInsetsController.hide(WindowInsetsCompat.Type.systemBars()): This line hides the system bars. The WindowInsetsCompat.Type.systemBars() constant specifies that we want to hide both the status bar and the navigation bar.

Conclusion

Handling window insets correctly is vital for creating a polished and user-friendly Android application. By enabling fitsSystemWindows, implementing custom inset handling with ViewCompat and considering immersive mode, you can ensure your app adapts seamlessly to different screen configurations and device UIs, ultimately providing a better user experience. When using setOnApplyWindowInsetsListener, do so selectively on only necessary views, instead of using it on every View on the screen.