Compose Multiplatform draw behind System bars in IOS

Question

Cannot draw behind Top and Bottom Bars in IOS.

Hi, I am trying KMP for android and ios but had a problem. In Kotlin blog it says "Using the WindowInsets API, you can draw background content via Compose Multiplatform behind the notch" but I couldn't do it. Does anyone know how can I draw background for Top and Bottom Bar?

Answer 1

First, disable platform-specific default insets being applied in the app.

• For IOS you need to disable safe area paddings being applied by the Switft UI by adding the following line in iosApp/iosApp/ContentView.swift file.

// iosApp/iosApp/ContentView.swift

struct ContentView: View {
    var body: some View {
        ComposeView()
                .ignoresSafeArea(edges: .all) // Add this line
                .ignoresSafeArea(.keyboard)
    }
}

• For Android Make sure to call enableEdgeToEdge() in your Activity's onCreate.

// MainActivity.kt

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    enableEdgeToEdge() // Add this
    setContent {
        // composables
    }
}

Your app will now start drawing content behind the top and bottom bar; Now you can use WindowInsets API from Compose to apply correct padding from within compose.

@Composable
MyScreen() {
    Box(
        Modifier
            .background(Color.Red)
            .windowInsetsPadding(WindowInsets.safeDrawing)
    ) {
         // Content goes here
    }
}