How to change the color of statusbar in iOS and Android with NativeScript

Question

I'm trying to change the color of the status bar to match the rest of the Page background-color and it seems to be not working.

Below is what my home.css looks like

Page {
    background-color: #5497CB;
    color:#ecf0f1;
}

Here is what my home.js looks like

var frameModule = require("ui/frame");

exports.loaded = function(args) {

    var page = args.object;
    var iosFrame = frameModule.topmost().ios;
    if (iosFrame) {
        iosFrame.navBarVisibility = 'never';
    }
};

And lastly here is what my home.xml

<Page loaded="loaded">
    <StackLayout orientation="vertical">
        <TextField id="email_address" text="{{ email }}" hint="Email Address" keyboardType="email" />
        <TextField secure="true" text="{{ password }}" hint="Password" />

        <Button text="Sign in" tap="signIn"/>
        <Button text="Sign up for Groceries" cssClass="link" tap="register"/>
    </StackLayout>
</Page>

As you can see nothing over complicated, just trying to get the status bar color to have a white font and same background color!

Any pointers?

This will be part of NativeScript 1.5.0. Until the release of this version, you can keep up with the discussion for this issue [here](https://github.com/NativeScript/NativeScript/issues/767). — Neli Chakarova, Oct 21 '15 at 05:37
@NeliChakarova I was trying to follow this link http://developer.telerik.com/featured/customizing-ios-navigation-bar-status-bar-nativescript/ but that's good to know it's coming out in 1.5! — BaconJuice, Oct 21 '15 at 12:13
I'm trying to set the Page background color and the status bar is not inheriting the color. I set the Page.backgroundSpanUnderStatusBarProperty to true and nothing happens. Still getting a grey status bar (I'm trying to set it red). Am I doing something wrong? — Andrey Luiz, Jan 10 '16 at 15:44

score 3 · Answer 1 · answered Mar 20 '16 at 01:22

You're not using an action bar, so you need to set the backgroundSpanUnderStatusBar on the Page element to true.

<page backgroundSpanUnderStatusBar="true">

The text will still be black, but you can change that by changing the status bar to light for the whole application.

You can use the StatusBar Plugin for more control over the status bar in NativeScript.

score 1 · Answer 2 · answered Oct 22 '15 at 08:53

The Status Bar (time, battery indicator) inherits its background color from the Navigation Bar (back, page title, etc). But if you hide the Navigation Bar the Status Bar inherits the color from the Window background color instead. So if you want to change the color of the Status Bar with the Navigation Bar hidden you have to set the Window background color.

Here's an example of hiding the Nav bar and setting the status bar background to a gray-ish color.

var iosFrame = frameModule.topmost().ios;
if (iosFrame) {
    iosFrame.navBarVisibility = 'never';
    iosFrame.controller.view.window.backgroundColor = UIColor.colorWithRedGreenBlueAlpha(0.945, 0.953, 0.953, 1);
}

(colorWithRedGreenBlueAlpha wants a number between 0 and 1 where 1 is the same as 255 in a rgb(255, 255, 255) pattern. So basically divide with 255)

This somewhat works! now is there any way to specify the font color to white? — BaconJuice, Oct 22 '15 at 13:06

score 1 · Answer 3 · edited May 23 '17 at 12:07

This only works for android.

You can change the primary and primaryDark colors:

<style name="AppThemeBase" parent="Theme.AppCompat.Light.NoActionBar">
  <item name="toolbarStyle">@style/NativeScriptToolbarStyle</item>
  <item name="colorPrimary">@color/ns_primary</item>          <- Here
  <item name="colorPrimaryDark">@color/ns_primaryDark</item>  <- And here
  <item name="colorAccent">@color/ns_accent</item>
</style>

This answer solved my problems.

score 1 · Answer 4 · answered Jun 13 '20 at 14:10

To change the Background Color for Android use:

import { Page, Color } from "tns-core-modules/ui/page/page";

@Component({...}) 
export class YourAnyComponent {
    public constructor(private page: Page) {}
    ngOnInit() {
       this.page.androidStatusBarBackground = new Color("#0077cc");
    }
}

score 0 · Answer 5 · answered Oct 19 '17 at 10:42

import { Page } from "ui/page";

@Component({...}) 
export class YourAnyComponent {
    public constructor(private page: Page) {}
    ngOnInit() {
        this.page.backgroundColor = '#2c303a';
        this.page.backgroundSpanUnderStatusBar = true;
        this.page.actionBarHidden = false; // if you want to show only statusbar or - true if you want to show both stutus bar and action bar
    }
}

score 0 · Answer 6 · answered Nov 11 '20 at 08:50

For Android, It's as simple as that. Just copy paste below lines in E:\projects\appname\app\App_Resources\Android\src\main\res\values\styles.xml

<item name="android:statusBarColor">@color/ns_primaryDark</item>
<item name="android:windowLightStatusBar">true</item>

put it under any theme you want, Usually I put this under AppThemeBase

How to change the color of statusbar in iOS and Android with NativeScript

6 Answers6