Skip to content
Modus-Logo-Long-BlackCreated with Sketch.
  • Services
  • About
  • Blog
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
Modus-Logo-Long-BlackCreated with Sketch.
  • Services
  • About
  • Blog
  • Partners
  • Work
  • Insights
  • Careers
  • Contact
September 21, 2012

Tinting your Status Bar in iOS6 and Cordova

Application Development

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

  1. Open up your MainViewController.xib in XCode
  2. 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

Posted in Application Development
Share this

Stan Bershadskiy

Stan Bershadskiy specializes in all things JavaScript with vast knowledge in Sencha frameworks. Recently, he has directed his focus towards React Native and has co-authored The React Native Cookbook. Stan is located in New York City and can be found presenting at conferences around the country. During his time with Modus Create, Stan filled the role of Architect.
Follow

Related Posts

  • Statuses and Status Categories in Jira
    Taking Advantage of Status and Status Categories in Jira

    Statuses in Atlassian’s Jira help product management teams organize, prioritize, and track where issues are…

  • Cross-Platform Cordova App Development with Merges
    Cross-Platform Cordova App Development with Merges

    The Cordova CLI provides an often overlooked mechanism, called merges. This feature works irrespective of…

Subscribe to the Modus Newsletter

Receive the latest insights from our team each month.

modus create logo_white
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Careers

© 2023 Modus. All Rights Reserved.

Privacy Policy | Accessibility Statement | Sitemap

Scroll To Top