Get nice, dark UIToolbar blur as in Facebook iOS 7 app

Question

Does anyone know what Facebook uses for their blurred toolbar?

Now, I KNOW there are already countless threads about iOS 7 blur. They all come to these same solutions:

1. Use a UIToolbar with translucent set to YES, and then set its barTintColor property. The problem with this approach is that it significantly increases the lightness of the color. This is the approach that AMBlurView uses. The nav bar in the Facebook app remains dark blue even when it's above white content. (with AMBlurView it becomes pastel blue)
2. Render the underlying view's in a graphic context, then blur that context, output it as a UIImage and use that as background view, repeat 30 times per second. (which hurts performance pretty bad). This is the approach that FXBlurView uses. It doesn't seem like Facebook is using that either.

I've read at length in the Apple Dev Forums and it seems like this is a technical challenge even for Apple engineers. With Facebook nailing the real-time blur with something else than the two approaches I described. Any idea?

Ellisellison

See also: #18897985 – Charmer

Answer 1

Apparently the trick here is to insert the translucent layer as a sublayer of the navigation bar. I take no credit for finding this, and the following snippet has been taken from this gist.

UIColor *barColour = [UIColor colorWithRed:0.13f green:0.14f blue:0.15f alpha:1.00f];

UIView *colourView = [[UIView alloc] initWithFrame:CGRectMake(0.f, -20.f, 320.f, 64.f)];
colourView.opaque = NO;
colourView.alpha = .7f;
colourView.backgroundColor = barColour;

self.navigationBar.barTintColor = barColour;

[self.navigationBar.layer insertSublayer:colourView.layer atIndex:1];

Runesmith

don't you have to keep strong reference to colorView ? – Muth

Better to just create a CALayer *colorLayer directly, I'd have thought. – Fitzwater

You should set userInteractionEnabled to NO on the sublayer otherwise the back button won't work. – Flittermouse

Answer 2

I couldn't get the desired results unless I have added the following lines to the answer above:

 [self.navigationBar setBackgroundImage:[UIImage new]
                             forBarMetrics:UIBarMetricsDefault];
    self.navigationBar.shadowImage = [UIImage new];
    self.navigationBar.translucent = YES;

Here is the full code

[self.navigationBar setBackgroundImage:[UIImage new]
                         forBarMetrics:UIBarMetricsDefault];
self.navigationBar.shadowImage = [UIImage new];
self.navigationBar.translucent = YES;

UIColor *barColour = [UIColor colorWithRed:0.13f green:0.14f blue:0.15f alpha:1.00f];
UIView *colourView = [[UIView alloc] initWithFrame:CGRectMake(0.f, -20.f, 320.f, 64.f)];
colourView.opaque = NO;
colourView.alpha = .7f;
colourView.backgroundColor = barColour;

self.navigationBar.barTintColor = barColour;

[self.navigationBar.layer insertSublayer:colourView.layer atIndex:1];

Oboe

This cancels the blur for me – Shahjahanpur