I am trying to build a Fullscreen Popup composable that shows the given content completely full screen while also hiding the system bars. Like an image or document viewer.
Right now it seems to be working for Api 35, which was my main concern, because of the edge-to-edge enforcement. But I'm getting some weird behaviour on Android 14 and below. The Popup seems just a little short to cover the whole screen and I don't know what's causing it. It has probably something to do with the window insets, but I can't figure it out.
Here is my FullscreenPopup:
@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun FullScreenPopup(
onDismissRequest: () -> Unit,
content: @Composable () -> Unit,
) {
val context = LocalContext.current
Popup(
onDismissRequest = onDismissRequest,
properties = PopupProperties(
usePlatformDefaultWidth = false,
clippingEnabled = false,
),
popupPositionProvider = object : PopupPositionProvider {
override fun calculatePosition(
anchorBounds: IntRect,
windowSize: IntSize,
layoutDirection: LayoutDirection,
popupContentSize: IntSize
): IntOffset {
return IntOffset.Zero
}
},
) {
Surface(
modifier = Modifier.fillMaxSize(),
content = content,
)
}
DisposableEffect(Unit) {
val window = context.findActivity()?.window ?: return@DisposableEffect onDispose {}
val insetsController = WindowCompat.getInsetsController(window, window.decorView)
insetsController.apply {
hide(WindowInsetsCompat.Type.statusBars())
hide(WindowInsetsCompat.Type.navigationBars())
systemBarsBehavior = WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
}
onDispose {
insetsController.apply {
show(WindowInsetsCompat.Type.statusBars())
show(WindowInsetsCompat.Type.navigationBars())
systemBarsBehavior = WindowInsetsControllerCompat.BEHAVIOR_DEFAULT
}
}
}
}
And this is how I want to use it
FullScreenPopupTestTheme {
var showFullScreenPopup by remember { mutableStateOf(false) }
Scaffold(
modifier = Modifier.fillMaxSize(),
contentWindowInsets = ScaffoldDefaults.contentWindowInsets,
) { innerPadding ->
Box(
modifier = Modifier
.fillMaxSize()
.padding(innerPadding)
.background(Color.Cyan),
) {
Box(
modifier = Modifier
.size(100.dp)
.align(Alignment.Center)
.background(Color.Yellow)
.clickable { showFullScreenPopup = true },
contentAlignment = Alignment.Center,
) {
Text("Click here")
}
}
}
if (showFullScreenPopup) {
FullScreenPopup(
onDismissRequest = { showFullScreenPopup = false },
) {
Box(
modifier = Modifier
.fillMaxSize()
.background(Color.Blue)
.clickable { showFullScreenPopup = false },
)
}
}
}
This is how it looks on Android 15
This is how it looks like on Android 14
Does anybody have an idea how to get it to cover the whole screen like it does on Android 15?
Any help is appreciated!