When iOS 7 was introduced Apple allowed your application to extend all the way up into the status bar region. This was neat because you can scroll content behind it, change the color, and make the entire screen feel completely full. One thing that has upset me is that it isn’t really straight forward as to how to change the color of the time, carrier, battery, and other icons that live in the status bar. So here is my quick tips.
Launch Screen Colors
In general you can just hide the status bar at launch, but if you want the time to overlay on it you will need to head into your Info.plist file. You will find a Status Bar entry and you simply need to change it to Light Content and then it will display white text and icons. Or set this info in you info.plist.
Inside UIViewControllers
Now inside the UIViewControllers are a bit different. We first want to style the tint and the bar tint of the navigation bar. I am goign to set it to a blue background with a white tint. I do this in my FinishedLaunching where I create my UINavigationController in the AppDelegate:
navigationController.NavigationBar.TintColor = UIColor.White;
navigationController.NavigationBar.BarTintColor = UIColor.FromRGB(52,152,219);
Now were are getting closer, but still have 2 issues.
- The text is black
- The status bar icons and text are black
NavigationBar Text Appearance
To fix the text we head back to our AppDelegate and we have to update the “TitleTextAttributes” of our UINavigationBar.Appearance:
Status Bar
From my findings teh status bar on each UIViewController is actually controlled separatelly, which is very annoying. We must update the NavigationBar.BarStyle and set it to the BlackStyle to get the desired white text and icons. I do this on the ViewDidLoad method.
NavigationController.NavigationBar.BarStyle = UIBarStyle.Black;
There you have it! A nice new themed iOS app. If you find a better way of doign this please let me know in the comments.
Xamarin.Forms!
If you are using Xamarin.forms you must also set the BarTextColor = Color.White on your NavigationPage! Additionally you should go into your info.plist and set “View controller-based status bar appearance” to No
