Painless transparent status and navigation bar

March 2021

A transparent status bar with visible icons and no additional layout code.

It’s impossible these two approches altogether without separation in values-21-like folders. Second flags are stronger, so if you use the second approach, the first one will be overridden. 

It’s possible to get status bar from one approach and navigation bar from the other.

First approach (API 21~27+)

Pros: looks great
Cons: works on newer devices; you constantly need to think if status icons don’t blend with your app.

Status bar

To make status bar transparent, you’d need to set in your themes.xml file:

<item name="android:statusBarColor">@android:color/transparent</item>
<item name="android:windowLightStatusBar">@bool/isDay</item>

android:statusBarColor requires API 21+, but android:windowLightStatusBar requires API 23. android:windowLightStatusBar changes status icon color to the dark ones. If you don’t set this property, icons will be barely visible on light backgrounds:

Without setting up android:statusBarColor in both night and day modes, status icons are light.

Android 10 (API 29) introduced night theme support.

Navigation bar

<item name="android:navigationBarColor">#01FFFFFF</item>
<item name="android:windowLightNavigationBar">@bool/isDay</item>
  1. ATTENTION!!! android:navigationBarColor ignores completely transparent colors, so it simply won’t work with @android:color/transparent. So use almost, but not entirely transparent colors. Requires API 21.
  2. android:windowLightNavigationBar works similarly to android:windowLightStatusBar  and requires API 27.

works only

Second approach (API 19+)

Pros: hassle-free; works on almost any device
Cons: looks a bit worse:

Status bar

<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
  1. It’ll lead to ‘dimmed’ status bar, not really transparent.
  2. It will also draw the app beneath the system UI:

You may fix with

<item name="android:fitsSystemWindows">true</item>

Yet still, you can’t get rid off the dimmed background.

Leave a Reply

Your email address will not be published. Required fields are marked *