完全透明的导航栏，但不应该影响 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

• How to Have a Transparent Status Bar but Leave Navigation Bar Opaque?
• How do I set my status bar transparent but keep by navigation bar black?
• Can I set FLAG_LAYOUT_NO_LIMITS only for status bar?

Thanks any advance.

Answer 1

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.