How to create a fully transparent Navigation Bar?

1
votes

I want to change the Navigation Bar fully transparent like on the picture below.

I tried <item name="android:windowTranslucentNavigation">true</item> but it is not fully transparent (more like 50%).

Is there a solution? Because i found nothing to it, but I saw some apps that used it like Nova. And its even in googles guidelines https://material.google.com/layout/structure.html#structure-system-bars

Transparent Nav

5
androidandroid-layoutmaterial-design

5 Answers

6
votes

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

enter image description here

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:

enter image description here

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

enter image description here

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 enter image description here

Dark Theme

enter image description here

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 !

3
votes

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>
2
votes

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);
1
votes

Try this 

<resources>
<style name="Theme" parent="android:Theme.Material.Wallpaper.NoTitleBar">
    <item name="android:navigationBarColor">@android:color/transparent</item>
    <item name="android:windowTranslucentNavigation">true</item>
</style>

0
votes

It worked for android >= 10 You can try the color by default color android

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

By the way you can try this

<item name="android:fitsSystemWindows">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>
<item name="android:navigationBarColor">@android:color/transparent</item>