Make the status bar transparent but remain colored navigation bar on Android 13

Question

I have a Cordova application in which I need to make the statusBar transparent and the navigationBar with a specific color.

I have achieved the first thing, but in Android 13 the statusBar is also made transparent and the webview is tucked underneath. To solve this I add a padding so that the navigationBar can be seen in CordovaActivity.java:

WindowCompat.setDecorFitsSystemWindows(window, false);                          ViewCompat.setOnApplyWindowInsetsListener(window.getDecorView(), (v, insets) -> {
                        int marginBottom = insets.getInsets(WindowInsetsCompat.Type.navigationBars()).bottom;
                        v.setPadding(0, 0, 0, marginBottom);
                        return insets;
                      });

But by doing this I lose the color of the navigationBar...

How can I make the statusBar transparent and the navigationBar a specific color in Android 13?

I have tried to set the color of the navigationBar as follows and adding and removing flags, but it has no effect:

window.setNavigationBarColor(Color.RED);

Answer 1

You just need to do the first line in onCreate of the activity:

WindowCompat.setDecorFitsSystemWindows(getWindow(), false);

Then in your res/values/themes modify your theme to include these style items:

<item name="android:statusBarColor">@color/transparent</item>
<item name="android:navigationBarColor">#ff0000</item>

Or if you are using splash screen plugin:

<?xml version='1.0' encoding='utf-8'?>
<resources>
    <style name="Theme.App.SplashScreen" parent="Theme.SplashScreen.IconBackground">
        <!-- ... -->
        <item name="postSplashScreenTheme">@style/MyTheme</item>
    </style>

    <style name="MyTheme" parent="Theme.AppCompat.NoActionBar">
      <item name="android:statusBarColor">@color/transparent</item>
      <item name="android:navigationBarColor">#ff0000</item>
    </style>
</resources>