StatusBar not changing Color on Android 13

[niklas-simon]

Bug Report

Problem

What is expected to happen?

In the callback of "deviceready" when executing backgroundColorByHexString, StatusBar should change color.

What does actually happen?

StatusBar doesn't change color.

Information

This only happens on Android 13. On Android 12 and lower, everything works as expected.
I debugged the issue using Android Studio and saw that the relevant functions get executed without error. Note that when setting a break point, everything works. Without a break point however, it doesn't.
I also found out that setting a timeout of about 2 seconds fixes the issue but is not a great solution.

Command or Code

function applyTheme() {
    window.StatusBar.styleLightContent();
    window.StatusBar.backgroundColorByHexString("#2196f3");
}
document.addEventListener("deviceready", function () {
    applyTheme();
});

in 'config.xml':

<preference name="StatusBarOverlaysWebView" value="false" />

Environment, Platform, Device, Versions

Platform: Android 13
Device: Pixel 7a
Cordova-Android: 12.0.1
Cordova-CLI: 12

Checklist

• I searched for existing GitHub issues
• I updated all Cordova tooling to most recent version
• I included all the necessary information above

[fpauk]

Thanks for this ! - Did ou also find a way to change the font color

[niklas-simon]

by using

window.StatusBar.styleLightContent();

or

window.StatusBar.styleDefault();

you should be able to set the font color to black/white respectivly, but as mentioned above, on Android 13, this doesn't work.

[TiBz0u]

Hi,

For who is interested by a workaround.

I achieve to add a custom statusBar color by defining a new Theme (on a Samsung running Android 13).

Since Cordova Android 11, Cordova implements Splashscreen API. After showing the splashScreen, a new theme is applied to the main activity.

So first, in Cordova config.xml, define the theme you want to load after the splashScreen (see documentation).

<preference name="AndroidPostSplashScreenTheme" value="@style/Theme.Custom"/>

After, you need to define the new theme. You need to create a file and import into your Android project through Cordova Hooks (see doc).
Don't forget to define your own color or use a existing android color (here named @color/custom).

<?xml version="1.0" encoding="utf-8" ?>
<resources>
    <style name="Theme.Custom" parent="@style/Theme.AppCompat.NoActionBar">
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:statusBarColor">@color/custom</item>
        <item name="android:windowLightStatusBar">false</item>
        <item name="android:windowTranslucentStatus">false</item>
    </style>
</resources>

Pay attention that

• This method implies to put android-minSdkVersion to 23
• This method will set the statusBar color for the whole application at startup

Edit: We can still use method backgroundColorByHexString after in the application.

Kr.

[jondspa]

Along the same lines as TiBzOu: I achieved a white background status bar with dark text. Tested on Android 9, 11, 12, and 13. Hope it helps someone!

• I have these lines in my config file:

<preference name="StatusBarStyle" value="default" />
<preference name="StatusBarBackgroundColor" value="#FFFFFF" />

• I added to the themes.xml file:

<item name="android:windowLightStatusBar">
    true
</item>

- Jon

[jcesarmobile]

can you provide a sample app that reproduces the issue?

[mohammadrafigh]

@jcesarmobile I'm currently not able to provide a sample app due to lack of enough free time. But I can approve that the reason of this issue is related to the changes on how Splashscreen works as @TiBz0u and @jondspa mentioned above. Splashscreen plugin now starts the main activity of the app with a predefined default theme using AndroidPostSplashScreenTheme property. So the clean way to handle that is to add these inside the Android platform of config.xml:
(fine tune with your paths and your needs)

<!-- Load our own theme to style navigation bar for API >= 27 -->
<preference name="AndroidPostSplashScreenTheme" value="@style/MyCustomTheme"/>
<!-- Our theme doesn't include anything special for API < 27 -->
<config-file target="res/values/themes.xml" parent="/resources/">
    <style name="MyCustomTheme" parent="Theme.AppCompat.NoActionBar"></style>
</config-file>
<!-- Copy our own theme to style navigation bar for API >= 27 -->
<resource-file src="res/theme/android/values-v27/themes.xml" target="app/src/main/res/values-v27/themes.xml" />

then add a themes.xml file under the provided path, like this:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <style name="MyCustomTheme" parent="Theme.AppCompat.NoActionBar">
    <item name="android:statusBarColor">#002860</item>
  </style>
</resources>

[jcesarmobile]

closing since no sample app was provided, but yeah, the problem is the splash screen not allowing changes to the status bar while it's being animated.
Should be solved by setting FadeSplashScreen to false, requires cordova-android 12.0.0
see apache/cordova-android#1506

[Venegrad]

Same issue

[trayvon2017]

closing since no sample app was provided, but yeah, the problem is the splash screen not allowing changes to the status bar while it's being animated. Should be solved by setting FadeSplashScreen to false, requires cordova-android 12.0.0 see apache/cordova-android#1506

worked for me on android14