java.lang.NoSuchFieldError about system UI light status bar on Android platform

android

#1

There is no possible to change Status Bar color on Android as mentioned in the Doc.

I typed this code in my app.component.ts file:

if (platform.isAndroid && platform.device.sdkVersion >= "21") {
   var window = application.android.startActivity.getWindow();
   var decorView = window.getDecorView();
   decorView.setSystemUiVisibility(android.view.View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
}

The android.view.View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR does not exists.

https://docs.nativescript.org/angular/ui/theme#android

Dependencies version

"dependencies": {
	"@angular/animations": "~5.2.0",
	"@angular/common": "~5.2.0",
	"@angular/compiler": "~5.2.0",
	"@angular/core": "~5.2.0",
	"@angular/forms": "~5.2.0",
	"@angular/http": "~5.2.0",
	"@angular/platform-browser": "~5.2.0",
	"@angular/platform-browser-dynamic": "~5.2.0",
	"@angular/router": "~5.2.0",
	"nativescript-angular": "^5.2.0",
	"nativescript-checkbox": "^3.0.3",
	"nativescript-theme-core": "~1.0.4",
	"reflect-metadata": "~0.1.8",
	"rxjs": "~5.5.2",
	"tns-core-modules": "^4.0.1",
	"zone.js": "~0.8.2"
},
"devDependencies": {
	"babel-traverse": "6.26.0",
	"babel-types": "6.26.0",
	"babylon": "6.18.0",
	"lazy": "1.0.11",
	"nativescript": "^4.0.2",
	"nativescript-dev-sass": "^1.5.0",
	"nativescript-dev-typescript": "~0.7.0",
	"typescript": "^2.6.2"
}

I created a issue on github

Related


#2

If you want to change the color of the status bar you can declare the color in the colors.xml in app_resources - or at runtime with:

// style the android statusbar on supported devices
// We don't want to override in the colors.xml for the theme right now
if (isAndroid) {
	app.android.on(app.AndroidApplication.activityResumedEvent, args => {
		const window = app.android.foregroundActivity.getWindow();
		window.setStatusBarColor(new Color("#333").android);
	});
}

If you want to apply different FLAGs to the window on android then this blog post will help (https://bradmartin.net/2016/03/10/fullscreen-and-navigation-bar-color-in-a-nativescript-android-app/)

If you’re just getting a TS warning, since TS itself doesn’t know about android APIs, you can add the tns-platform-declarations package to your app which provides the native APIs so that TS knows the data types. However, it’s built with Android 17, so there are cases where you have to guard against values using the any type which this could be the scenario if this flag was introduced after 17. You can still get an updated android typings file if you want to know more recent types.


#3

Thank you for help me.

In this case I want to build a status bar as mentioned in NS Angular doc mentioned above and the egghead.io lesson.


#4

Ah yea, I actually remember helping Nathan with the Android part of this lesson. It should work but this flag is only 23+, see the android docs here(https://developer.android.com/reference/android/view/View.html#SYSTEM_UI_FLAG_LIGHT_STATUS_BAR) - my blog post on the various flags might cover this flag as well as fullscreen and other android window flags. Hope this helps some.


#5

Thanks, @bradwaynemartin! I solved it change using a window.setStatusBarColor() instead View flag as mentioned here:

https://developer.android.com/reference/android/view/View#SYSTEM_UI_FLAG_LIGHT_STATUS_BAR

// Constant value to SYSTEM_UI_FLAG_LIGHT_STATUS_BAR
window.setStatusBarColor(0x000000);

const androidStatusBar = View.SYSTEM_UI_FLAG_LAYOUT_STABLE
    | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
    | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
    | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY;

decorView.setSystemUiVisibility(androidStatusBar);

So… to solve another problems related to nativescript-angular:~5.3.0 dependency I see the CHANGELOG related it.