Material design header bar for ionic

adam06 · June 9, 2015, 11:00am

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

Thank you.

pcr · June 9, 2015, 11:03am

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

adam06 · June 9, 2015, 11:10am

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

pcr · June 9, 2015, 11:15am

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.

pcr · June 9, 2015, 11:17am

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.

adam06 · June 9, 2015, 11:17am

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

newmesis · June 9, 2015, 12:57pm

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

adam06 · June 10, 2015, 3:38am

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

newmesis · June 10, 2015, 3:57am

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

adam06 · June 10, 2015, 4:07am

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

newmesis · June 10, 2015, 2:30pm

Chrome does not work, you should test the device live

mhartington · June 10, 2015, 8:20pm

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

github.com

mhartington/PhillyETE/blob/master/www/js/app.js#L20


// This is an ionic wrapper for cordova's
// device ready event.
$ionicPlatform.ready(function() {
  // if we have the keyboard plugin, let use it
  if (window.cordova && window.cordova.plugins.Keyboard) {
    //Lets hide the accessory bar fo the keyboard (ios)
    cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    // also, lets disable the native overflow scroll
    cordova.plugins.Keyboard.disableScroll(true);
  }
  if (window.StatusBar) {
    if (ionic.Platform.isAndroid()) {
      StatusBar.backgroundColorByHexString('#1976D2');
    } else {
      StatusBar.styleLightContent();
    }
  }
  $timeout(function() {
    navigator.splashscreen.hide();
  });
});

adam06 · June 11, 2015, 4:36am

@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

anicacute09 · September 4, 2016, 2:30pm

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