Tinting your Status Bar in iOS6 and Cordova

One of the new “features” of iOS 6 is that you can now tint the status bar. Instead of Default (Grey), Black Transparent, or Black Opaque it can now be anything.

The way iOS decides what color the status bar should be is based on the color of the lowest pixel of a UINavigationBar component. Source

In a Cordova application, or any fullscreen UIWebView app, there’s no UINavigationBar by default, thus no way to tint the status bar.

There is a simple “hack” though that you can employ to get your status bar tinted, you only have to sacrifice one row of pixels.

Tinting your StatusBar in a Cordova project

Open up your MainViewController.xib in XCode
Drag a NavigationBar to your view

Set the tint (color) of the navigation bar

Set the position of the UINavigationBar to y: -43px;

Now you’re all set. You should see something like this

Modus Create is a product development, training, and services company based out of Reston VA. We help clients realize their product vision, and build in-house development capabilities.

Interested in working with us, or have a question? Feel free to contact us anytime, or call us directly at 1-855-663-8727.

Chris

Thanks for this post! One more thing: I noticed that the NavigationBar has a drop shadow. Is there a simple way to remove it?
- Stan Bershadskiy
  
  If you choose to instantiate the UINavigationBar manually in your Objective C code there is a config property: ‘shadowImage’ that you can set. http://developer.apple.com/library/ios/#documentation/uikit/reference/UINavigationBar_Class/Reference/UINavigationBar.html
  
  I’m not noticing this shadow though that you’re talking about in my app though on iOS6 at least.
Chris

Thanks for this post! One more thing: I noticed that the NavigationBar has a drop shadow. Is there a simple way to remove it?
- Stan Bershadskiy
  
  If you choose to instantiate the UINavigationBar manually in your Objective C code there is a config property: ‘shadowImage’ that you can set. http://developer.apple.com/library/ios/#documentation/uikit/reference/UINavigationBar_Class/Reference/UINavigationBar.html
  
  I’m not noticing this shadow though that you’re talking about in my app though on iOS6 at least.
Pingback: Announcing the Diablo 3 Mobile Companion | Modus Create

Tinting your Status Bar in iOS6 and Cordova

Tinting your StatusBar in a Cordova project

Let's Talk

Modus Newsletter

Recent Entries

Categories

Archives