jetpack compose Image on entire screen

Question

I have a simple screen implemented with Jetpack Compose, here is a preview of the screen.

There is a button like the sun on the TopAppBar which the user clicks to take a screenshot.

The problem is that I want to show the screenshot of the entire screen but without showing the status bar and the navigation bar.

Is there a solution to do this?

Answer 1

The composables are tied to a View which you can access with LocalView.current and through that View you can retrieve its .context and through that you can get to its Activity and to the Window object.

Once you have a reference to the Window (and to the View, if you have to support API level lower than 30), you can control status bar and navigation bar visibility.

A code example:

@Composable
fun MyFullScreenComposable() {
    val view = LocalView.current
    SideEffect {
        requestFullScreen(view)
    }

    Box {
        // ... other content
   
        Button(
            onClick = { requestFullScreen(view) }
        ) {
            Text("Go fullscreen")
        }
    }
}
    
fun requestFullScreen(view: View) {
    // !! should be safe here since the view is part of an Activity
    val window = view.context.getActivity()!!.window
    WindowCompat.getInsetsController(window, view).hide(
        WindowInsetsCompat.Type.statusBars() or
                WindowInsetsCompat.Type.navigationBars()
    )
}

fun Context.getActivity(): Activity? = when (this) {
    is Activity -> this
    // this recursion should be okay since we call getActivity on a view context
    // that should have an Activity as its baseContext at some point
    is ContextWrapper -> baseContext.getActivity()
    else -> null
}

In your case you might have to hide your action/title bar as well (or maybe you are already doing that).

Note that when the user taps on the screen while in full-screen mode, the bars will slide back. That's why I added a button as an example how you can let the user go back into full-screen mode through an action. In your case that could be a FloatingActionButton or some action on a semi-transparent top action bar.