Completely transparent navigation bar but it shouldn't affect the status bar on Android

Question

I need a screen that has a completely transparent navigation bar but the status bar should have colorAccent.

I tried different solutions but none of them work.

1- Tried to change color with XML

  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/zingat_blue_text</item>
    <item name="colorPrimaryDark">@color/zingat_blue_text</item>
    <item name="colorAccent">@color/zingat_blue_text</item>
    <item name="android:colorBackground">@android:color/white</item>
</style>

<style name="NoActionBar" parent="AppTheme">
    <item name="android:navigationBarColor">@android:color/transparent</item>
    <item name="android:windowTranslucentStatus">false</item>
    <item name="android:windowTranslucentNavigation">false</item>
</style>

When I tried code above, the navigation bar looks like picture below. That is not transparent

2- Tried to change windowTranslucentNavigation

I tried to set android:windowTranslucentNavigation = true and android:windowTranslucentStatus = false like below.

<style name="NoActionBar" parent="AppTheme">
    <item name="android:navigationBarColor">@android:color/transparent</item>
    <item name="android:windowTranslucentStatus">false</item>
    <item name="android:windowTranslucentNavigation">true</item>// CHANGED THIS LINE
</style>

In this case, both status bar and navigation bar affecting and it shows like picture below. Navigation bar seem a little bit transparent but even I set windowTranslucentStatus=false it has transparent background the Toolbar show bottom of status bar.

3- Tried to java code

Window window = getWindow();
window.setFlags( WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);

In this cas the navigation bar looks fully transparent but the status bar also looks transparent and the toolbar slide-up bottom of the status bar like solution 2.

I tried solutions below, none of them work

Thanks any advance.

score 1 · Answer 1 · answered Apr 05 '21 at 08:19

I think you want to draw View behind the status bar and navigation, You can do it with the new WindowInsetterAPI to set padding with System Inset's height (including status bar and navigation bar).

First combining these flags: SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN, SYSTEM_UI_FLAG_LAYOUT_STABLE, SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION

Example:

activity.window.decorView.apply {
            systemUiVisibility =
                systemUiVisibility or
                        View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or
                        View.SYSTEM_UI_FLAG_LAYOUT_STABLE or
                        View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
        }

Then you need your status bar transparent color and set to dark so the user can see it

<item name="android:statusBarColor">@android:color/transparent</item>    
// Set status bar color to dark 
<item name="android:windowLightStatusBar">true</item>
// Optionally if you also want transparent navigation bar
<item name="android:navigationBarColor">@android:color/transparent</item>

Because you are drawing behind the status bar so your top view and bottom need padding the status bar height to make it visible to the user (but if you want your image laid behind status don't apply padding to it).

To make padding you need to listen to WindowInsets by the following code:

ViewCompat.setOnApplyWindowInsetsListener(view) { v, inset ->
        val systemInsets = inset.systemWindowInsets
        v.setPadding(v.paddingLeft, systemInsets.top,
            v.paddingRight, systemInsets.bottom);
        inset
    }

To reduce boilerplate WindowInset listener code, you can use Insetter, just apply padding to directly XML through Data Binding.

Completely transparent navigation bar but it shouldn't affect the status bar on Android

1 Answers1

Linked