CODEWITHSUNDEEP
androidkotlinandroid-actionbarandroid-jetpack-composeuser-experience
mikolaj-jalocha
mikolaj-jalocha

Reputation: 728

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

Upvotes: 7

Views: 11512

Answers (2)

Stefan
Stefan

Reputation: 4231

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

Upvotes: 4

Phil Dukhov
Phil Dukhov

Reputation: 87794

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:

Upvotes: 12

Related Questions