Ionic 2 - Change color at the top of the screen

Ionic Framework ionic-v3
1

I built an app with Ionic 2 for Android.

I would like to know if it is possible with Ionic 2 to change the color that is at the top of the smartphone screen.

For example, in the Whatsapp image the top of the screen is green, and in my app it is black. I would like to switch to a lighter red, is this possible?

image

image

2

Yes, what you’re looking for is the ionic native status bar plugin. Check it out here: https://ionicframework.com/docs/v2/native/status-bar/

3

Thanks for helping me, I read the Statusbar documentation only that it did not work. I’ve tried those combinations and it did not work. What was I doing wrong?

app.ts

@Component({
    templateUrl: "app.html",
})
export class MyApp {
    @ViewChild(Nav) nav: Nav;
    rootPage: any = HomePage;

constructor(
    public platform: Platform,
    public myAppService: MyAppService
) {
    this.initializeApp();
    this.rootPage = HomePage;
}

initializeApp() {
    this.platform.ready().then(() => {
    StatusBar.overlaysWebView(false);
    StatusBar.backgroundColorByName("red");
    StatusBar.show();
    });
}

config.xml

I insert:

....
	<preference name="StatusBarOverlaysWebView" value="false" />
    <preference name="StatusBarBackgroundColor" value="red" />
    <feature name="StatusBar">
        <param name="ios-package" onload="true" value="CDVStatusBar" />
    </feature>
....

Message after build:

....

BUILD SUCCESSFUL

Total time: 8.222 secs

Built the following apk(s):
    C:/Users/R/Desktop/myapp/platforms/android/build/outputs/apk/android-debug.apk


ANDROID_HOME=C:\Program Files (x86)\Android\android-sdk

JAVA_HOME=C:\Program Files\java\jdk1.8.0_92

No target specified and no devices found, deploying to emulator


Error: No emulator images (avds) found.
1. Download desired System Image by running: "C:\Program Files (x86)\Android\android-sdk\tools\android.bat" sdk
2. Create an AVD by running: "C:\Program Files (x86)\Android\android-sdk\tools\android.bat" avd
HINT: For a faster emulator, use an Intel System Image and install the HAXM device driver
4

Looks like you implemented Status bar correctly. The build error is unrelated and is due to you not having an Android SDK installed. Follow the instructions here: https://cordova.apache.org/docs/en/latest/guide/platforms/android/