Search code examples
androidkotlinandroid-actionbarandroid-jetpack-composeuser-experience

How to hide ActionBar with Jetpack Compose

I want to hide default action bar, so in the Manifest file I have following code:

    <style name="Theme.MyCompose" parent="Theme.Material.DayNight.NoActionBar">
</style>

<style name="Theme.Material.DayNight.NoActionBar" parent="@android:style/Theme.Material.Light.NoActionBar" />

And the effect is like this:

enter image description here

What I want to achieve is like this:

enter image description here

The photography should cover white area. How to accomplish that?

UPDATE 1

After implementing solution with Translucent Status Bar and Accompanist Insets support, I've encountered stranger behawior. When window flags are set as follow:

 window.setFlags(
        WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
        WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
    )

Everything looks like this although insets are on: enter image description here

When removing those flags, insets works but I've that shadow:

enter image description here

Solution

  • If you need to hide status bar completely, you need to use a full screen theme, like showed in this answer

    Since Compose 1.2.0-alpha03, Accompanist Insets was mostly moved into Compose Foundation, check out migration guide for more details. The main changes to below answer is that ProvideWindowInsets is no longer needed and some imports should be replaced.

    If you need a transparent status bar, you can follow this answer, plus setup Accompanist Insets for compose like following:

    WindowCompat.setDecorFitsSystemWindows(window, false)
window.setFlags(
    WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
    WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
)

    Then in compose you can set your image as background and offset from status/navigation bars using systemBarsPadding and other Accompanist Insets modifiers.

    setContent {
    ProvideWindowInsets {
        ComposePlaygroundTheme {
            Box {
                Image(
                    painterResource(id = R.drawable.my_image),
                    contentDescription = "...",
                    contentScale = ContentScale.FillBounds,
                    modifier = Modifier.fillMaxSize()
                )
                Column(
                    Modifier.systemBarsPadding()
                ) {
                    Button(onClick = { /*TODO*/ }) {
                        Text("Hello")
                    }
                }
            }
        }
    }
}

    Result: