0

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!

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.