How to make status bar color changeable in Ionic 2

Question

I saw a lot of applications developed by ionic 2 that support status bar color with same color of header but I couldn't did that in my application

This image shows my status bar when I built it as apk and installed on my android phone

But I want to do such as this (if possible)

Answer 1

You can refer to this documentation: https://ionicframework.com/docs/native/status-bar/

To change color you can try on your app.component.ts, inside your constructor there:

(Assuming you have injected statusBar: StatusBar on your ctor)

this.statusBar.backgroundColorByHexString('#ffffff');

Not sure on how to decrease a bit of it's opacity like the example you have shown. Perhaps:

this.statusBar.styleBlackOpaque()
//or
this.statusBar.styleBlackTranslucent()

Let us know what worked for you.