Android Completely Transparent Status Bar

Android Completely transparent Status Bar?

All you need to do is set these properties in your theme:

<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>

Your activity / container layout you wish to have a transparent status bar needs this property set:

android:fitsSystemWindows="true"

It is generally not possible to perform this for sure on pre-kitkat, looks like you can do it but some strange code makes it so.

EDIT: I would recommend this lib: https://github.com/jgilfelt/SystemBarTint for lots of pre-lollipop status bar color control.

Well after much deliberation I've learned that the answer to totally disabling the translucency or any color placed on the status bar and navigation bar for lollipop is to set this flag on the window:

// In Activity's onCreate() for instance
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    Window w = getWindow();
    w.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
}

No other theme-ing is necessary, it produces something like this:

Transparent status bar (with visible navigation bar)

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.

NavigationBar and StatusBar not fully transparent on some devices

I found the solution to this problem. As Eugen Pechance pointed out, the first two lines of my original styles.xml are unnecessary. However, the main thing causing the half-transparent background were android:enforceStatusBarContrast and android:enforceNavigationBarContrast lines. The way that android enforces the contras is by adding that semi-transparent background to the status and navigation bar, which is not the way I thought it works. Setting these values to false does the trick.

Also, according to this article you should add the following line to the MainActivity.java get the content to go behind the status and navigation views:

@Override
  public void onCreate(@Nullable Bundle savedInstanceState) {
    WindowCompat.setDecorFitsSystemWindows(getWindow(), false);

    super.onCreate(savedInstanceState);
  }

Make sure that you override the correct onCreate function, since the default overriden function in react native doesn't get called.

How to make completely transparent status bar?

The problem:

Phone's can now have a "cut-out" (for notched phones etc. etc.), and when you hide the status bar properly, the phone thinks "ok, I need to make the former status bar just a black cut-out so it doesn't look silly."

The solution:

There's actually four things you need to do:

1. Tell Android you don't want status bars in the app (hide them). There is now a correct, backwards compatible way of doing this which I will detail below.
2. Tell Android to draw the app behind the cut-out area.
3. Tell Android that your layout should NOT fit the system window (if you don't do this, it will STILL put your layout within the space where the status bar used to be)
4. Manually adjust the bottom insets, as when you tell Android your layout should not fit the system window (step 3), unfortunately that's going to include the Navigation Bar, so if you don't adjust for this then your layout will be under the nav bar which may be undesirable.

The Code:

The below is a neat little extension function that will cover steps 1 and 3... (hide the status bars, set decorFitsSystemWindows to false). This allows, in your activity to simply put window.setInImmersiveMode()

fun Window.setInImmersiveMode() {
    val windowInsetsController = ViewCompat.getWindowInsetsController(decorView) ?: return
    windowInsetsController.systemBarsBehavior = WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
    windowInsetsController.hide(WindowInsetsCompat.Type.statusBars())
    WindowCompat.setDecorFitsSystemWindows(this, false)
}

You need to change your themes.xml to tell Android to draw behind these cutouts, with this line (api 27 and above only, hence the tools:targetApi part):

<item name="android:windowLayoutInDisplayCutoutMode" tools:targetApi="o_mr1">shortEdges</item>

And finally, there's a slightly more complex bit of code to handle setting up the bottom insets for your layout - again I've made it into an extension function so you can call view.setupInsets():

fun View.setupInsets() {
    ViewCompat.setOnApplyWindowInsetsListener(this) { view, windowInsets ->
        val insets = windowInsets.getInsets(WindowInsetsCompat.Type.systemBars())
        view.layoutParams = (view.layoutParams as FrameLayout.LayoutParams).apply {
            bottomMargin = insets.bottom
        }
        WindowInsetsCompat.CONSUMED
    }
}

How to make the status bar completely transparent with dark text color with Kotlin

You have to follow three steps.

1. Update your style.xml and main theme

   <item name="android:windowTranslucentStatus">true</item>
   <item name="android:windowTranslucentNavigation">true</item>
   

2. In your main xml add

   android:fitsSystemWindows="true"
   

3. In your activity before setcontView add

   if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
       Window w = getWindow();
       w.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
   }
   

Android Studio - How to have a transparent status bar?

You can check my answer on this post, as it seems like it is exactly what you are looking for.

Would hate to type it all here again but the answer from @Yunus might not work if all conditions are not met, mainly what the documentation for statusBarColor tells you.

The color for the status bar. If the color is not opaque, consider setting {@link android.view.View#SYSTEM_UI_FLAG_LAYOUT_STABLE} and {@link android.view.View#SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN}. For this to take effect, the window must be drawing the system bar backgrounds with {@link android.R.attr#windowDrawsSystemBarBackgrounds} and the status bar must not have been requested to be translucent with {@link android.R.attr#windowTranslucentStatus}. Corresponds to {@link android.view.Window#setStatusBarColor(int)}.

Refer the answer for setting those required flags and style, also to keep navigation bar simply DO NOT add View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION flag in case you have it in some code.

Good Luck.

---

Related Topics