How to create a fully transparent Navigation Bar?

Solution 1:

I was inspired by Google Keep app, which have similar implementation like shown below:

So i tried to find a proper post on how to achieve this thing but unfortunately found nothing and also above answers weren't working. So i decided to try out all the flags related to navigationBar Android Studio was suggesting.

Let me explain in detail:

1. Only android:navigationBarColor won't do any thing when you are using a light theme. But on dark theme, it will work.

2. Setting windowTranslucentNavigation to true will do 2 things:

   • draw the activity below the soft navbar
   • override navigationBarColor and force it to be transparent.

Which will look like below image:

3. If you use FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS (follow @Frankenxtein's answer) you will get below result:

Which is somehow close to desired result, but it isn't because it draws activity components below navbar. And also it mess your padding and margin (see full screenshot here). And more, you have to do it for each activity and also have to adjust current margin.

The Solution

This can be achieved without compromising current layout. To do this in Dark theme, you have no issue, just setting android:navigationBarColor will do the work.

However our goal here is to do it with a light theme let (#FFFFFF). Using android:windowLightNavigationBar which requires API 27 or higher along with android:navigationBarColor will result what we want.

<item name="android:navigationBarColor">@color/colorPrimaryDark</item>
<item name="android:windowLightNavigationBar">true</item>

Here for my app case colorPrimaryDark is #FFFFFF in light theme and dracula in dark theme, you can also declare a new variable for this. Which yields below results:

Light Theme

Dark Theme

Here android:navigationBarColor is setting background colour of navbar. And android:windowLightNavigationBar setting dark button colours and indicates that background is light as you can understand from it's name.

Hope this helps !

Solution 2:

use following code in onCreate of your Activity:

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);
            }

and in your styles.xml:

<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentNavigation">false</item>

Solution 3:

You can achieve that using FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS. Documentation explains:

Flag indicating that this Window is responsible for drawing the background for the system bars. If set, the system bars are drawn with a transparent background and the corresponding areas in this window are filled with the colors specified in getStatusBarColor() and getNavigationBarColor().

Set it like that in your Activity's onCreate:

getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);