Get the right color in iOS7 translucent navigation bar

Question

How can I get the right coloring for my translucent navigation bars in iOS 7? The navigation bar just adjusts the given color to a much brighter one. Changing brightness or saturation of the color also doesn´t deliver the right result.

Anyone having the same trouble? It seems to work somehow, looking at Facebook: they´re having their colors and translucent navigation bars.

Edit: Just to make it clear: I need the Bar to be translucent, not transparent (with some alpha), not solid! http://en.wikipedia.org/wiki/Transparency_and_translucency

Edit: Now posted to Apple BugReporter

Solution 1

The bar will adjust your color values.

Preferred method, for RGB >= 40 only, will give the most blurring

You can use this calculator and put in what you want the color to be when rendered on screen, it will tell you what to set the color of the barTintColor so when Apple adjusts it, it will show as intended

https://www.transpire.com/insights/blog/bar-color-calculator/

Edit: Note that these calculations are for a white background, and for lighter colours (rgb over 40, if you need darker, you will need to add a background layer like others have mentioned - although that will reduce the bar's blur)

In depth guide: https://www.transpire.com/insights/blog/custom-ui-navigationbar-colors-ios7/

Snippet:

@interface UnderlayNavigationBar : UINavigationBar

@end

.

@interface UnderlayNavigationBar ()
{
    UIView* _underlayView;
}

- (UIView*) underlayView;

@end

@implementation UnderlayNavigationBar

- (void) didAddSubview:(UIView *)subview
{
    [super didAddSubview:subview];

    if(subview != _underlayView)
    {
        UIView* underlayView = self.underlayView;
        [underlayView removeFromSuperview];
        [self insertSubview:underlayView atIndex:1];
    }
}

- (UIView*) underlayView
{
    if(_underlayView == nil)
    {
        const CGFloat statusBarHeight = 20;    //  Make this dynamic in your own code...
        const CGSize selfSize = self.frame.size;

        _underlayView = [[UIView alloc] initWithFrame:CGRectMake(0, -statusBarHeight, selfSize.width, selfSize.height + statusBarHeight)];
        [_underlayView setAutoresizingMask:(UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight)];
        [_underlayView setBackgroundColor:[UIColor colorWithRed:0.0f green:0.34f blue:0.62f alpha:1.0f]];
        [_underlayView setAlpha:0.36f];
        [_underlayView setUserInteractionEnabled:NO];
    }

    return _underlayView;
}

@end

.

UIViewController* rootViewController = ...;
UINavigationController* navigationController = [[UINavigationController alloc] initWithNavigationBarClass:[UnderlayNavigationBar class] toolbarClass:nil];
[navigationController.navigationBar setBarTintColor:[UIColor colorWithRed:0.0f green:0.0f blue:90.0f/255.0f alpha:1]];
[navigationController setViewControllers:@[rootViewController]];

Solution 2

You simply need to change translucent property

navigationBar.translucent = NO;

It is effectively the same as removing/making transparent subviews/sublayers of the navigation bar.

Solution 3

I've improved code from Achieving bright, vivid colors for an iOS 7 translucent UINavigationBar in my fork: https://github.com/allenhsu/CRNavigationController

With my modification, the result color on screen (picked on white background) will be exactly the same value passed into setBarTintColor. I think it's an amazing solution.

Solution 4

I know this answer is a little late, but if you're using Interface Builder, you might be getting the wrong color when using a hex value because Interface Builder is set to use the wrong color space. In Xcode 6.4, you can press the little gear in the top right of the color picker dialog to pick which color space you're using:

Mine was set to sRGB IEC6196-2.1, when I actually should have been using Generic RGB.

Solution 5

Here is another way to get right color of translucent navigation bar in iOS 7.x and later. For some colors it's possible to find the optimal bar tint color that makes translucent bar to appear with color that matches the desired one.

For example, for Facebook color that is rgb: 65,96,156 or #41609c the optimal color is #21458c. The following code set all navigation bars in the app to be of Facebook color with native cocoa-touch API only:

UIColor* barColor = [UIColor colorWithRed:0.129995 green:0.273324 blue:0.549711 alpha:1.0]; // #21458c to make bars actual color match the #41609c color.
[[UINavigationBar appearance] setBarTintColor:barColor];

The only limitation of the method is that optimized color can't be found for every possible color. Usually this is not possible for dark colors.

I made an BarTintColorOptimizer utility that should be run on the device to search for optimized bar color for any color you enter.

View more solutions

Comments

[stk]

This only works, if you have no title set in your NavigationBar. If you have a title set, it is dimmed out by the colorView.

[stk]

Sorry, but I clearly stated that I need the bar to be translucent.

[user1529956]

Facebooks is not translucent either. What makes you say it is? If you want the bar is be translucent, there's no way to get the true color since it'll have an alpha < 0

[stk]

Just scroll an image under the NavigationBar and you will recognize it´s translucent.

[stk]

That results in a transparent, but not translucent NavigationBar. en.wikipedia.org/wiki/Transparency_and_translucency

[Léo Natan]

Facebook bar is translucent. Getting tired of people with iPhone 4 telling everyone Facebook bar is not, when it clearly is.

[user1529956]

I have the iPhone 5 and it is not translucent on mine. Not sure why it differs.

[user1529956]

Sorry, I meant to say alpha < 1 in my other post. That's like setting any color alpha (anywhere) to < 1 then saying, "Why is the color not the same as when when the alpha = 1."

[user1529956]

Oh my mistake, it apparently is translucent but it wasn't noticeable.

[Eugene Dudnyk]

Okay, then fill apple bug report and ask designers to provide proper background image if system-provided translucency is not what you want.

[Eugene Dudnyk]

This code leaves navigation bar's layer correspondent for z-order and frame further adjustments to the layer you created. Basically bad approach. To go this way you need to create the navigation bar subclass to deal properly with subviews on your navigation bar by overriding its layoutSubviews method.

[stk]

Sorry, but I´m only getting transparency with your approach. There´s no blurry effect whatsoever. Translucency (in Apple-speak) inherits the blurry effect like the NavigationBar etc. has when you set navigationBar.translucent = YES;

[Nik]

Back button in pushed view controller stops working for me with this code, although Done works fine

[Nik]

Solved this issue using technique described in stackoverflow.com/questions/3046813/…

[gleb.kudr]

You should add you subview just above the background view of the NavigationBar. And the back buttons will be fine.

[stk]

Thanks and +1 for the calculator! Basically what it says is: You can´t have colors that are 'darker' than 102 in any value of RGB. This is bad, because my management won´t allow me to choose any other color than the companies' (which is RGB 181,27,32), just because Apple dictates so. There´s got to be another way, because Facebook is also much darker, it has RGB 65,95,156 in the current version of their app.

[stk]

avishic delivered exactly this approach 1,5 days before your answer. Correct me if I´m wrong...

[stk]

Have you read some of the other answers? The 'adding-layer-to-navbar'-approach has been posted at least twice before your answer.

[Eugene Dudnyk]

Hey man, you're cruel making -1 to my post. It is fully correct, and transparency is the partial case of the translucency. If you are bored with useless answers, this community is not for you.

[gleb.kudr]

Not exactly the same. He is moving newSubview behind all subviews of the navigation bar. But you should place it just above the original nav bar background which remains to be the last subview.

[SomeGuy]

You can still do darker colours, the downside is you need to add an underlay view to darken things up, which means the darker you go the weaker the blur will get. I've managed to recreate the Facebook blur of 65,96,156 with the following code. I did this with trial and error, the aim is to get the alpha of colourView to be as low as possible. img707.imageshack.us/img707/3151/482w.png

[Ian Hoar]

This doesn't work as it doesn't cover the area under the status bar, and also shows a gradient close to the bottom of the nav bar.

[dclowd9901]

I still had the darker burn across the title, so to fix that, I added ` [navigationBar setBackgroundColor:[[UIColor alloc] initWithWhite:0.0f alpha:0.0f]];`. Seemed to work.

[Maciej Swic]

You may wanna add autoresizing to support orientation changes: colourView.autoresizingMask = UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleW‌​idth;

[SomeGuy]

Although this wan't really meant to be a guide for simply setting it up, I've added some autoresizing masks and made it a bit more dynamic for the people that copy and paste without reading it.

[Maciej Swic]

@SomeGuy Also, I'm experiencing some strange results in iOS 7. If the colorView is inserted at index 1, it looks like it appears over the title and back button text if you push another view onto the navigation stack. If you put it on index 0 however everything works as expected. Thoughts?

[SomeGuy]

@Maciej Swic I've just added some fixes for index positioning, as well as a link to my more in depth blog post on using darker colors in conjunction with a blur on the navigation bar in iOS7

[SwiftArchitect]

@MatthewCrenshaw: I still find that with iOS 7.0.3, @AllenHsu CRNavigationController works best, even if your color is exceptionally vivid.

[Perjan Duro]

Wow man, you made my day! That solved my issue. Thanks a lot!

[lifjoy]

This works best for my Tungsten color navbars on iOS 8.

[Amio]

There is an document from apple describe how to "Matching a Bar Tint Color To Your Corporate or Brand Color" developer.apple.com/library/ios/qa/qa1808/_index.html

[Michael Peterson]

This will result in a solid bar color, the OP specifically did not want that.

[Gamec]

BarTintColorOptimizer is great!

[sizzle beam]

Almost five years later, and this underrated answer is still the only "correct" solution (in so far as any solution for this problem is "correct"). It's baffling that Apple's advice on this amounts to "figure it out yourself". Thanks for writing BarTintColorOptimizer!