feat(SystemBarPlugin): add setNavigationBarBackgroundColor to change the navigation bar

[ollm]

Platforms affected

Android

Motivation and Context

Since status bar handling has been added directly to cordova, navigation bar control should also be included.

Description

The changes add window.statusbar.setNavigationBarBackgroundColor('#ffffff00') to change the navigation bar color on older devices or when gesture navigation is disabled (3-button navigation).

The navigation buttons color is detected automatically, just like with setBackgroundColor. transparentNavigationBar is also applied automatically if the provided color is fully transparent.

The color is also applied as the background color of the view. This should mitigate/resolve the following issue #1946

Example usage:

window.statusbar.setNavigationBarBackgroundColor('#1f2933');

Android 11:

Android 17:

window.statusbar.setNavigationBarBackgroundColor('#fafafa')

Android 11:

Android 17:

Testing

I tested it on the Android 11 and Android 17 emulators.

Note

I'm not sure if this is intentional, but I wanted to mention it. If #00000000 is passed to setBackgroundColor, the following code treats it as fully transparent, so the navigation bar color is not changed to the expected one (White icons). For now, I'm using #01010100 as a workaround.

cordova-android/framework/src/org/apache/cordova/SystemBarPlugin.java

Lines 189 to 193 in ed4e629

	if(bgColor == Color.TRANSPARENT) {
	isBackgroundColorLight = isColorLight(getUiModeColor());
	} else {
	isBackgroundColorLight = isColorLight(bgColor);
	}

Checklist

• I've run the tests to see all new and existing tests pass
• I added automated test coverage as appropriate for this change
• Commit is prefixed with (platform) if this change only applies to one platform (e.g. (android))
• If this Pull Request resolves an issue, I linked to the issue in the text above (and used the correct keyword to close issues using keywords)
• I've updated the documentation if necessary

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 63.20%. Comparing base (ed4e629) to head (2ba40c3).

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #1983   +/-   ##
=======================================
  Coverage   63.20%   63.20%           
=======================================
  Files          24       24           
  Lines        4922     4922           
=======================================
  Hits         3111     3111           
  Misses       1811     1811           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[GitToTheHub]

@erisu What do you think? I think it's a good idea to let the user also control the appearance of the navigation bar. I think it should be used over its own API. So it should exists a NavigationBarPlugin.

[GitToTheHub]

I saw the native code is not in a StatusBarPlugin, it's in a SystemBarPlugin. So the navigation bar code could be handled there also. Maybe statusbar.js could be changed to systembar.js, also. The call for changing the navigation bar could be done over windows.navigationbar?

[ollm]

I saw the native code is not in a StatusBarPlugin, it's in a SystemBarPlugin. So the navigation bar code could be handled there also. Maybe statusbar.js could be changed to systembar.js, also. The call for changing the navigation bar could be done over windows.navigationbar?

I think that would be the best approach, since I'm already reusing some functions from SystemBarPlugin.

I've also made the passed color be applied as the background color of the view ollm@61e2295. This should mitigate/resolve the following issue #1946

[erisu]

@erisu What do you think?

I'll try to find some time to test the current behavior and the changes in this PR as well.

I saw the native code is not in a StatusBarPlugin, it's in a SystemBarPlugin. So the navigation bar code could be handled there also. Maybe statusbar.js could be changed to systembar.js, also. The call for changing the navigation bar could be done over windows.navigationbar?

My suggestion would be to avoid adding this to statusbar.js and to keep the file name as it is. Since the module is clobbered onto the window.statusbar object, it makes sense for it to contain status bar-related functionality only and the filename match its purpose. Additionally, the iOS implementation follows the same approach, so keeping this structure would also maintain consistency across platforms.

Instead, one possible approach would be to introduce a new navigationbar.js file and clobber it onto the window.navigationbar object. The API could then be something like window.navigationbar.setBackgroundColor().
I also did a quick search and couldn't find any web standard that defines window.navigationbar, so it seems like it would be available for us to use.

I don't see any issue with both statusbar.js and navigationbar.js pointing to the same native-side class since the class is dedicated to all System Bars.

Again, I will try to find some time to look more in-depth.

[GitToTheHub]

Ok sounds good. I think the solution with the navigationbar.js is a good one.

[ollm]

If you'd like, I can already move the js code to a navigationbar.js file.

[GitToTheHub]

I think you can already move the code to a navigationbar.js

[ollm]

I've moved the code to navigationbar.js d263a68

[GitToTheHub]

Looks good 🙂