Coloured Status Bar on a TabBarController with NavigationBar not working

Question

I've read a lot of posts on here and tried most of the options mentioned, but none fix the issue for me. I have an app that is based off of a Tab Bar Controller. Each tab is a UIViewController with a Navigation Bar at the top.

Adding this code to the AppDelegate gives me an orange coloured Navigation Bar with white text, but a white status bar with Black text.

[[UINavigationBar appearance] setBarTintColor:[UIColor orangeColor]];
[[UINavigationBar appearance] setTintColor:[UIColor whiteColor]];
[[UINavigationBar appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName : [UIColor whiteColor]}];

Reading the answers on various pages suggest adding the following to the View controller:

- (UIStatusBarStyle)preferredStatusBarStyle
{
    return UIStatusBarStyleLightContent;
}

Then calling this in View Did Load:

[self setNeedsStatusBarAppearanceUpdate];

This gets me a White status bar with White text, how can I now get the status bar to go orange to match my Navigation Bar??

The solution mentioned on here https://stackoverflow.com/a/19513714/505457 for those using a Navigation Controller doesn't work, I guess thats because my main controller is a Tab Bar Controller.

Anyone come across this before? Thanks in advance for any advice / suggestions you may have. I can provide a sample app if required, but its probably as quick to build one with the Tab Bar template, add a Navigation bar then paste in my code samples.

Plasma

I couldn't try that but you can set color again on view will disappear. -(void) viewWillDisappear:(BOOL)animated{ [[UINavigationBar appearance] setBarTintColor:[UIColor orangeColor]]; [[UINavigationBar appearance] setTintColor:[UIColor whiteColor]]; [[UINavigationBar appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName : [UIColor whiteColor]}];} — kocakmstf, May 11 '16 at 20:56

score 2 · Answer 1 · answered May 09 '16 at 11:53

2

You can find the statusBar UIVIew by it's name and tint it. Add this method to your AppDelegate.m and call it from didFinishLaunchingWithOptions:

- (void)setStatusBarBackgroundColor:(UIColor *)color {

    UIView *statusBar = [[[UIApplication sharedApplication] valueForKey:@"statusBarWindow"] valueForKey:@"statusBar"];

    if ([statusBar respondsToSelector:@selector(setBackgroundColor:)]) {
        statusBar.backgroundColor = color;
    }
}

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

 ...   

    [self setStatusBarBackgroundColor:[UIColor orangeColor]];

 ...

}

Note: There are apps in store that use this method. So it is okay with the apple HIG policy.

answered May 09 '16 at 11:53

Pau Senabre

4,155
2
27
36

Thanks for the detailed answer this gets me almost there, it does indeed tint the status bar orange. However even though I'm passing [UIColor orangeColor] to both the StatusBar and the NavigationBar, the status bar "orange" is darker than the NavigationBar. While this would suffice and I can probably work around it, I was hoping for a uniform colour, so that the StatusBar becomes one with the Navigation bar if you know what I mean? A bit like on Facebook, Instagram and Timehop. – Plasma May 10 '16 at 10:31
So, maybe try setting up the same color as your NavigationBar self.navigationController.navigationBar.backgroundColor or [UIColor clearColor] – Pau Senabre May 10 '16 at 11:50
I tried: [[UINavigationBar appearance] setBarTintColor:[UIColor orangeColor]]; [[UINavigationBar appearance] setBackgroundColor:[UIColor orangeColor]]; while closer in tint it is still not the same. If I use the clearColour the NavBar is a very pale orange. – Plasma May 10 '16 at 19:35
I've added a comment with a demo project to the main question. – Plasma May 11 '16 at 20:21
1

This is not okey with Apple HIG policy, this is using an undocumented API which can break easily. It cannot be automatically detected by Apple and approvers can miss it. It doesn't mean it's permitted. Just adding a view with the specified color behind the status bar would work the same and it would be reliable. – Sulthan May 11 '16 at 20:49

score 1 · Answer 2 · answered May 04 '16 at 01:10

1

Well I had almost the same problem since IOS7 , But my quick solution is to change all your views from the first one, I am refering to set up your color bar configuration in the AppDelegate.m file, I recommend to use this free framework Nab Bar Color And Gradient is very easy to use and also you will be available to set a beautiful gradient on all of your views.

See the examples in the project.

answered May 04 '16 at 01:10

Gerardo E Martínez

61
7

Thank you, that looks interesting but I'm struggling to get it working with the Tab Bar Controller. The demo wants to use a NavigationController, and when I try to implement it on a tab controller I either lose the tab bar, or end up with a white Navigation Bar and Status Bar. I will definitely be investigating if I can integrate this in my project though. – Plasma May 05 '16 at 12:09

score 1 · Answer 3 · answered May 11 '16 at 20:31

1

Normally, you shouldn't be adding a UINavigationBar to a UIViewController. Instead, fill your UITabBarController will UINavigationControllers.

    let firstViewController = FirstViewController(nibName: nil, bundle: nil)
    let firstNavigationController = UINavigationController(rootViewController: firstViewController)

    let secondViewController = SecondViewController(nibName: nil, bundle: nil)
    let secondNavigationController = UINavigationController(rootViewController: secondViewController)

    let navigationControllers = [
        firstNavigationController,
        secondNavigationController
    ]

    yourTabBarController.setViewControllers(navigationControllers, animated: false)

The same general process applies if you are using storyboards.

answered May 11 '16 at 20:31

bsmith11

296
1
3

I'll have a look at doing this but I'm using Obj C and that looks like Swift code? The app layout is in an app thats already been built and I'm looking to retro fit the coloured Status and Navbar to it. I am using StoryBoards, and I use theTabBar for navigation and the Navigation bar more as a status bar for which tab you are on, and to add extra action buttons if needed. I'd ideally prefer not to re-write all the navigation of the app and the tab transitions just to achieve this. – Plasma May 11 '16 at 20:38
So looking in to this, I think I can see what you are getting at, I've added an answer based on what I found, but was lead there by your post. So unless someone else comes up with a way to do it without me re-doing all my story boards etc then I will award you the bounty because your answer has got me to the result I want. – Plasma May 11 '16 at 21:20

score 1 · Accepted Answer · edited May 23 '17 at 12:14

Right so the point BSmith11 made about adding Navigation controllers to a Tab Bar got me thinking. So I did a bit of Googling and an answer on this page, helps a lot: Tab bar controller inside a uinavigationcontroller

By having the TabBar controller as the rootViewController, then inserting a "NavigationController" between that and the normal ViewController allows me to do this:

    //Fix up the Navigation bar tint and set text colours to white
[[UINavigationBar appearance] setBarTintColor:[UIColor orangeColor]];
[[UINavigationBar appearance] setBackgroundColor:[UIColor orangeColor]];

[[UINavigationBar appearance] setTintColor:[UIColor whiteColor]];
[[UINavigationBar appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName : [UIColor whiteColor]}];

//Also requires setting 'View controller-based status bar appearance' to NO in .plist
[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];

Which is exactly what I had before, and that gives me a coloured StatusBar and the exact same colour NavBar. Now to see if I can add it in to the existing app and not break everything.

Plasma

Coloured Status Bar on a TabBarController with NavigationBar not working

4 Answers4