Change the bar tint color makes the blurry area becomes black and white

Question

I would like to add a blurry effect on my view, and I used a UIToolbar to do that. But when I try to add bar tint color on the UIToolbar, something weird happens.

Here is the code I used to add UIToolbar, very basic, nothing fancy:

 UIToolbar *toolbar = [[UIToolbar alloc]initWithFrame:CGRectMake(0, 0, self.blurView.frame.size.width, self.blurView.frame.size.height)];
[self.blurView addSubview:toolbar];

Before I add the barTintColor, everything looks good:

But after I add bar tint color:

[toolbar setBarTintColor:[UIColor colorWithWhite:0.000 alpha:0.500]];

Everything under the toolbar becomes black and white:

At first I thought something wrong with the color or the transparency, I've been playing with different color and different transparency. As long as I use setBarTintColor, it all becomes black and white like that. For example, a random bluish green:

Answer 1

It looks to be an issue with UIToolbar.

Instead of setting the tint color, you can add a CALayer with a background color with an alpha component less than one, depending on how prominent you want your color to be, like so:

    CALayer *extraColorLayer = [CALayer layer];
    extraColorLayer.frame = CGRectMake(0, 0, toolbar.frame.size.width, toolbar.frame.size.height);
    extraColorLayer.backgroundColor = [UIColor colorWithRed:r/255 green:g/255 blue:b/255 alpha:0.5].CGColor;
    [toolbar.layer addSublayer:extraColorLayer];

This appears to create the effect you're looking for.

Adapted from this answer.