Transparent status bar (with visible navigation bar)

Question

I know this question has been asked many times, but all of the answers either not working, or use deprecated code:

• Android Completely transparent Status Bar?
• Transparent status bar - before Android 4.4 (KitKat)
• Lollipop : draw behind statusBar with its color set to transparent

I want to achieve the same effect as latest google maps app:

• Fully transparent status bar (Only status bar. not navigation bar!)
• Non deprecated solution

WindowCompat.setDecorFitsSystemWindows(window, false) partially working as it also hides the navigation bar also

Answer 1

Step 1: To make the status bar transparent: add the below into the style themes.xml or sytles.xml:

<item name="android:windowTranslucentStatus" tools:targetApi="kitkat">true</item>

<item name="android:statusBarColor" tools:targetApi="lollipop">@android:color/transparent</item>

Step 2: Then in activity to make the status bar overlaps with the activity:

The used window flags are deprecated as of API level 30, so they can be used till API level 29:

if (Build.VERSION.SDK_INT in 21..29) { 
    window.statusBarColor = Color.TRANSPARENT
    window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS)
    window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS)
    window.decorView.systemUiVisibility =
        SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or SYSTEM_UI_FLAG_LAYOUT_STABLE

} else if (Build.VERSION.SDK_INT >= 30) {
    window.statusBarColor = Color.TRANSPARENT
    // Making status bar overlaps with the activity
    WindowCompat.setDecorFitsSystemWindows(window, false)
}

UPDATE For API-30

This doesn't actually make the status bar transparent, it makes it translucent and will still have a shadow to it

This is right on API-30, and reason because setting <item name="android:windowTranslucentStatus">true</item>.

Actually the <item name="android:windowTranslucentStatus">true</item> is only required on API level 19. If your app is greater than that, you can dismiss it at all.

Anyways, the way to fix this is to override the themes.xml/styles.xml in API-30; i.e. to have a res\values-v30\themes.xml; you can just add the main app theme like:

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TransparentStatusBar" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
     </style>
</resources>

UPDATE 2 For API-30

Just discovered a bug on API 30 that the bottom navigation overlaps with the activity obscuring the bottom part of it, that probably couldn't be discovered by the OP as they are using a map.

To solve this, As per documentation:

You can address overlaps by reacting to insets, which specify which parts of the screen intersect with system UI such as the navigation bar or the status bar. Intersecting can mean simply being displayed above the content, but it can also inform your app about system gestures, too.

So, we need to handle the System bars insets for API level 30+ to avoid your app overlapping with the navigation bar:

This requires the top root ViewGroup of the activity layout, and accordingly the LayoutParams need to be coasted appropriately.

Here I am using a ConstraintLayout as a root layout, and FrameLayout.LayoutParams:

/*
*  Making the Navigation system bar not overlapping with the activity
*/
if (Build.VERSION.SDK_INT >= 30) {

    // Root ViewGroup of my activity
    val root = findViewById<ConstraintLayout>(R.id.root)

    ViewCompat.setOnApplyWindowInsetsListener(root) { view, windowInsets ->

        val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars())

        // Apply the insets as a margin to the view. Here the system is setting
        // only the bottom, left, and right dimensions, but apply whichever insets are
        // appropriate to your layout. You can also update the view padding
        // if that's more appropriate.

        view.layoutParams =  (view.layoutParams as FrameLayout.LayoutParams).apply {
            leftMargin = insets.left
            bottomMargin = insets.bottom
            rightMargin = insets.right
        }

        // Return CONSUMED if you don't want want the window insets to keep being
        // passed down to descendant views.
        WindowInsetsCompat.CONSUMED
    }

}

This is tested on 8 devices/emulators on the range of API level 19 to API level 30.

Answer 2

To make the StatusBar completely transparent,

First, set its color as transparent in the theme or by code as :

//In Theme
<item name="android:statusBarColor">@android:color/transparent</item>
//In Code
window.statusBarColor = android.R.color.transparent

Then, to draw the view behind the StatusBar, use this code:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
    window.setDecorFitsSystemWindows(false)
} else {
    window.setFlags(
        WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
        WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
    )
}

You can also play with the boolean property android:windowLightStatusBar, it sets the StatusBar's text and icon color as black or white, You can do it programmatically as well. You can also set color to your NavigationBar if you don't want to hide it.

Output:

Answer 3

Add this to your theme

<item name="android:statusBarColor">@android:color/transparent</item>
<item name="android:windowLightStatusBar" ns1:targetApi="23">true</item>

And use this method

     private fun handleStatusBar() {
        //set fullScreen (draw under statusBar and NavigationBar )
            WindowCompat.setDecorFitsSystemWindows(window, false)

            container.setOnApplyWindowInsetsListener { view, insets ->
            val navigationBarHeight = WindowInsetsCompat.toWindowInsetsCompat(insets)
                .getInsets(WindowInsetsCompat.Type.navigationBars()).bottom

            view.updatePadding(bottom = navigationBarHeight)
            WindowInsetsCompat.CONSUMED.toWindowInsets()
        }

        //make statusBar content dark
        WindowCompat.getInsetsController(window, window.decorView)?.isAppearanceLightStatusBars =
            true

        window.statusBarColor = Color.TRANSPARENT
    }