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:

Midterm

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. – Postfix

Answer 1

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:

Eggert

@Midterm setFlags is needed to remove status bar background, so it won't have dark shadow. What's wrong with setFlags in your case? – Eggert

please check post update. – Midterm

@Midterm sure you're using Modifier.systemBarsPadding() for your buttons container? And setDecorFitsSystemWindows is called in your activity? Also what android are you using? – Eggert

Answer 2

There's a new EdgeToEdge solution for making your System Bars (StatusBar/NavigationBar) completely transparent.

Be sure that you're using compose.activity dependency of at least 1.8.0:

 implementation("androidx.activity:activity-compose:1.8.0")

Add this code in your onCreate() method of the activity:

override fun onCreate(savedInstanceState: Bundle?) {
    enableEdgeToEdge(
        statusBarStyle = SystemBarStyle.light(
            Color.TRANSPARENT, Color.TRANSPARENT
        ),
        navigationBarStyle = SystemBarStyle.light(
            Color.TRANSPARENT, Color.TRANSPARENT
        )
    )
    super.onCreate(savedInstanceState)
}

And your root composable should look something like this:

    ...
    val view = LocalView.current
    if (!view.isInEditMode) {
        SideEffect {
            val window = (view.context as Activity).window
            window.statusBarColor = Color.Transparent.toArgb()
            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = !darkTheme
        }
    }
    ...

You can also check this video tutorial: https://youtu.be/pLMw9Vlbfgw

Amethist