Home > Enterprise >  How to hide ActionBar with Jetpack Compose
How to hide ActionBar with Jetpack Compose

Time:09-25

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

CodePudding user response:

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


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:

  • Related