How to Change the Status Bar Color in iOS 8

Ever since the release of iOS 7, the status bar has become a major component of the UI in iOS apps. The reason being that with the release of iOS 7, Apple allowed developers to also utilize the top 20 pixels on the screen, which were unaccessible before (if you were not using a UINavigationController on your screen), since they were allocated to the status bar. With this update developers can now utilize the space behind the iOS status bar to display content from their app. For example, on the iOS weather app screen below, you can see how the cloudy weather and night sky are displayed behind the status bar.

To display content like this though, the color of the status bar has to be such that your app’s content is visible behind it and the status bar’s content itself, is clearly visible in the foreground. So you may have to change the color of the status bar content based on the theme of your app. For example, if you’re using a dark theme in your app, then you may want to use white for the status bar content. Similarly, if you’re using a light theme in your app, then you might want to use black for the status bar content, while also keeping the status bar’s transparency in mind (in case you want to display content behind the status bar, like in the weather app above). Here’s a quick tutorial on how to change the status bar color in iOS 8.

How to Change the Status Bar Color in iOS 8

Step 1: Open the info.plist file of your app and set the UIViewControllerBasedStatusBarAppearance to NO (as shown below).

Step 2: Next, in your AppDelegate.m, write the following code:

This will set the color of the status bar to white throughout the app. If you want, you can also change the status bar color in between screens. The UIStatusBarStyleLightContent command (used above) will set the status bar color (between screens) to white whereas the UIStatusBarStyleDefault command will set the status bar color (between screens) to black, which is the default setting. If however, your app includes redirection, for example to Safari or Photo-Picker, you may want to first ensure that the color of the status bar doesn’t change when you return to your app. In that particular case, you may have to write code to set the status bar color again upon re-entering your app.

 

Explore our blog

 

ABOUT FOLIO3

As a leading mobile app development company (iPhone, Android, Windows Phone, HTML5 app development), Folio3 specializes in native app development services and cross platform mobile app development services for the iPhone and iPad. We also offer extensive mobile app testing and QA services. If you have a mobile app idea that you’d like to discuss please or would like to know more about our iPhone app development services, please Contact Us. Learn more about our iPhone, Android and Windows Phone app development services