How to hide ActionBar with Jetpack Compose

Question

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:

What I want to achieve is like this:

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:

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

That white area is not the action bar. That is the status bar. You need a full-screen theme for that if you want the effect all the time. — CommonsWare, Sep 23 '21 at 19:54

Phil Dukhov · Accepted Answer · 2022-03-24T08:50:19.303

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:

@amtrax `setFlags` is needed to remove status bar background, so it won't have dark shadow. What's wrong with `setFlags` in your case? — Phil Dukhov, Sep 25 '21 at 08:34
@amtrax sure you're using `Modifier.systemBarsPadding()` for your buttons container? And `setDecorFitsSystemWindows` is called in your activity? Also what android are you using? — Phil Dukhov, Sep 25 '21 at 15:38

How to hide ActionBar with Jetpack Compose

1 Answers1