How can i change the StatusBar color or set it to transparent on Android, using NativeScript with Angular?

Question

I'm using NativeScript with Angular, and I can't seem to change the StatusBar color in my project or set it to transparent (any of these would be fine). Instead, it is not totally transparent, but is translucent black, so the background scrolls behind it but it is darkened by the StatusBar. I would like to set it to transparent or to change the color (to the same one as the page background)

What I've tried:

Changing the "ns_primaryDark" and "ns_primary" colors in App_Resources/Android/src/main/res/values/colors.xml (works on launch screen if i set the TranslucentStatus" to false;
Setting <item name="android:windowTranslucentStatus"></item> in <style name="AppThemeBase" parent="Theme.AppCompat.Light.NoActionBar"> in App_Resources/Android/src/main/res/values/styles.xml doesn't make any difference, despite working fine on <style name="LaunchScreenThemeBase" parent="Theme.AppCompat.Light.NoActionBar"> (the launch screen);
Setting <item name="android:windowLightStatusBar">true</item> changes the text color to black and works on both the launch screen and the main app;
Using the code below in any component's constructor doesn't change anything in my app, but it worked on the other project i tried (details below), setting the color to black:

let window = app.android.startActivity.getWindow();
window.setStatusBarColor(new Color("black").android);

One thing i also tried was doing these steps on another project i had downloaded (https://github.com/NativeScript/nativescript-ui-samples/tree/master/chart this one, to be exact) and it worked, so i thought the template i used in my application might be "overlaying" any settings for the StatusBar.

I then tried to make a new project with the same template as mine and i figured out that it didn't work either. Is the template my problem? If so, is there any way to get around it?

The template i used is this one: https://github.com/NativeScript/nativescript-app-templates/tree/master/packages/template-tab-navigation-ng (also works with "tns create my-app-name --template tns-template-tab-navigation-ng").

Big thanks in advance.

Manoj Manoj · Accepted Answer · 2019-11-19T18:43:50

Add the following code to your main.ts, that should do the job.

import * as application from "tns-core-modules/application";

declare var android;

application.android.on(application.AndroidApplication.activityCreatedEvent, (event) => {

    const activity = event.activity;

    if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
        activity.getWindow().addFlags(android.view.WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
        activity.getWindow().clearFlags(android.view.WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        activity.getWindow().addFlags(android.view.WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
        activity.getWindow().setStatusBarColor(android.graphics.Color.TRANSPARENT);
    } else {
        activity.getWindow().addFlags(android.view.WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
    }

    const parent = activity.findViewById(android.R.id.content);
    for (let i = 0; i < parent.getChildCount(); i++) {
        const childView = parent.getChildAt(i);
        if (childView instanceof android.view.ViewGroup) {
            childView.setFitsSystemWindows(true);
            childView.setClipToPadding(true);
        }
    }
});

It's pretty much as in the library. If you like to use the library, you will have to include it in your app grad and access the StatusBarUtil class.

How can i change the StatusBar color or set it to transparent on Android, using NativeScript with Angular?

2 Answers