Material design header bar for ionic

ionic-v1
1

Hi guys,
Is there any way to get this kind of view using ionic header bar that overlap with android status bar

Thank you.

2

I dont see difference between your image and a regular ionic header.

3

Hi pcr,
Regular ionic header looks like this. It shows status bar in dark background which is default to android.

4

Statusbar and header are 2 different things. The statusbar is device specific. Allthough you can change statusbar with cordiva plugin statusbar. This has nothing todo with material.

5

If you want to change the color of both: statusbar color can be changed by the statusbar plugin. The color of the Ionic header by sass.

6

ya, I am trying to get this effect using ionic, Is there any possibility to get this this done.

7

http://ngcordova.com/docs/plugins/statusbar/ you tested with this

8

Hi @newmesis,
I tried this one but it didn’t work for me. Is there any changes need to be done in config.xml file also. I just tried with code that give in the plugin documentation in ngCordva page

9

ud that that system is working?
It gives an error?
could make debugging to see the log in android and know what is happening

10

Oh no, I checked the device log with chrome inspect device option. It shows an error Uncaught TypeError: Cannot read property 'overlaysWebView' of undefined.

11

Chrome does not work, you should test the device live

12

I was able to do it on a live android device (5.0+) with this in my run phase

13

@mhartington, this doesn’t work for me. However I able to get that effect by editing config.xml file. I added following two lines to that file and it worked for me. And I also added the this plugin.

<preference name="StatusBarOverlaysWebView" value="true" />
<preference name="StatusBarBackgroundColor" value="#FF7043" />

these two lines are added under widget in that XML file

Thanks guys for your support.
Cheers

14

how did you achieve that kind of header bar… it is not working for me… the statusbar overlaps to my header bar…