How to show composable from edge-to-edge with display cutout?

Question

Rendering edge-to-edge works fine without a display cutout. But as soon as there is a notch, hiding the status bar doesn't result in additional space for my composable.

What am I doing wrong?

https://developer.android.com/develop/ui/views/layout/edge-to-edge
https://developer.android.com/develop/ui/views/layout/display-cutout

All screenshots are taken from an Android device emulator running Android 14. I get the same result on a physical device running Android 13.

The demo app draws a red line along the edges of a canvas filling the available space on the screen.
Code snippets to replace // additional stuff to be added here are mentioned above screenshots.

First it respects the system bar insets.

class MainActivity : androidx.activity.ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // additional stuff to be added here
        setContent {
            Greeting()
        }
    }
}

@Composable
fun Greeting() {
    Canvas(
        modifier = Modifier.fillMaxSize()
    ) {
        drawRect(Color.Red, style = Stroke(20.dp.toPx()))
    }
}

Now let's ignore the insets for the system bars and let the system bars cover the upper and lower parts of the red frame.
WindowCompat.setDecorFitsSystemWindows(window, false)

Now hide the system bars and see the red frame surrounding the whole screen.

WindowCompat.setDecorFitsSystemWindows(window, false)
val insetsController = WindowCompat.getInsetsController(window, window.decorView)
insetsController.hide(WindowInsetsCompat.Type.systemBars())

Why does the canvas on the right (device with display cutout) does not use the full height of the screen?

Answer 1

Using shortEdges cutout mode should fix it. Just add this item to your app theme:

<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>