Aug 11

In Interface Builder there are several places where you can seemingly set the style of the status bar. In a drop down you can select between None, Gray, Black and Translucent Black. The status bar on the screen in Interface Builder immediately changes to match your selection. But when you run your application you will notice that the status bar is back to the default gray color. What gives?

If you look closely at the Attributes Inspector Window in Interface Builder you will notice that it says “Simulated Interface Elements” above the drop down for the status bar, and a few other settings. This discrete headline is Apple’s way of telling you that the changes you make here only apply to Interface Builder, and the purpose is to help you visually design your screens. But to actually implement these settings you have to do something else. It took me a while to understand this “hidden” meaning too…

Setting the style of the status bar in code is easy enough. In applicationDidFinishLaunching you can add this line of code:

[application setStatusBarStyle:UIStatusBarStyleBlackOpaque];

When you run the app, the status bar will be a pleasing black color. However, if you look closely at the status bar while the app is launching, you will notice that it briefly turns gray. That is of course not acceptable.

So take out the line of code you just added to your application delegate. And instead add this to your Info.plist file:

<key>UIStatusBarStyle</key>
<string>UIStatusBarStyleBlackOpaque</string>

If you prefer to edit/view Info.plist as an XML Property List, it should look like this:
Status bar style = Opaque black style

written by Nick \\ tags: ,

6 Responses to “How To Set The Style Of The iPhone Status Bar”

  1. Jason Says:

    Thanks! This tip is just what I was looking for!

  2. mabedan Says:

    do you know any way to do it animated?

  3. Nick Says:

    @mabedan: To set the style of the status bar in code with animation use: – (void)setStatusBarStyle:(UIStatusBarStyle)statusBarStyle animated:(BOOL)animated

    There is no equivalent for the Info.plist setting. But since apps typically have a zoom-in animation when they launch, it doesn’t seem like a fade animation on the status bar is necessary.

  4. Jackie Says:

    Hi Nick,
    I have a question about this. I used an example on apple official site called AddMusic in my iphone app. Actually i used MPMediaPicker to choose songs playing at background, and
    i wrote this
    [[UIApplication sharedApplication] setStatusBarHidden:NO animated: YES];

    After choosing” done”, i wrote
    [[UIApplication sharedApplication] setStatusBarHidden:YES animated: YES];

    But the tatusBar just appeared black, it still occupied some space. I want to remove it from my view which is not inherited from UIView or UIViewController. Could you please help me with this? I think this because the view of statusBar was still there but i have no idea how to get it and remove. Thanks for your help.

  5. Nick Says:

    @Jackie: Hiding and showing the status bar inside your app is tricky, and you should have a really good UI reason for doing this. I’ve worked on one app where hiding the status bar for a particular screen was a requirement. It was a book reader and they wanted all the available screen real estate for the book content on the reading screen. We managed to do it, but it wasn’t a generic solution. And the origin of subsequent views sometimes get offset by 20 pixels. So I would strongly recommend that you either show the status bar at all times, or hide it from the start using the Info.plist setting.

  6. Taaber Halliwell Says:

    Thank you so much for this! I hadn’t noticed the heading “simulated interface elements” before but now it makes sense. Thanks again!

Leave a Reply