Real time blur effect for Navigation Bar

Question

How to achieve the real time blurring effect for the navigation bar just like the Trailers app in iPhone.

i.e As you scroll the contents should get blurred behind the navigation bar. Please help me with some code.

Thanks!

I want to achieve an effect like this:-

enter image description here

From iOS 8.0 there's class added for blur called, ["`UIVisualEffectView`"](https://developer.apple.com/Library/ios/documentation/UIKit/Reference/UIVisualEffectView/index.html) — Hemang, Dec 05 '14 at 04:38
Thanks for the response but can you please tell me how to apply this class to navigation bar. Thanks in advance — Shikhar varshney, Dec 05 '14 at 05:04
Yes sure, please take reference from few of the answers [here](http://stackoverflow.com/questions/24067719/how-to-use-uivisualeffectview) — Hemang, Dec 05 '14 at 05:07
but these effects are not all working with Navigation bar. What I want is that as the user scrolls, the content in the background of the Nav bar should give a Blur effect to the front nav bar. — Shikhar varshney, Dec 05 '14 at 05:44

Kampai · Accepted Answer · 2020-01-02T06:22:08.660

44

Apple has introduced new classes UIVisualEffectView and more to add translucency and blur effect on views from iOS 8.0 release.

Here how you can use it to add a blur effect to navigation bar or any other UIView:

Swift 5

func addBlurEffect() {
    let bounds = self.navigationController?.navigationBar.bounds
    let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .light))
    visualEffectView.frame = bounds ?? CGRect.zero
    visualEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    self.navigationController?.navigationBar.addSubview(visualEffectView)        

    // Here you can add visual effects to any UIView control.
    // Replace custom view with navigation bar in the above code to add effects to the custom view.
}

Objective C Code:

- (void) addBlurEffect {
    // Add blur view
    CGRect bounds = self.navigationController.navigationBar.bounds;
    UIVisualEffectView *visualEffectView = [[UIVisualEffectView alloc] initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]];
    visualEffectView.frame = bounds;
    visualEffectView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
    [self.navigationController.navigationBar addSubview:visualEffectView];
    self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];
    [self.navigationController.navigationBar sendSubviewToBack:visualEffectView];

    // Here you can add visual effects to any UIView control.
    // Replace custom view with navigation bar in the above code to add effects to the custom view.
}

UPDATE:

If you find that after adding blur effect on navigationBar, navigation buttons are not visible then add below line after adding blurView code.

Swift:

self.navigationController?.navigationBar.sendSubview(toBack: visualEffectView)

Objective C:

[self.navigationController.navigationBar sendSubviewToBack:visualEffectView];

edited Jan 02 '20 at 06:22

answered Dec 05 '14 at 12:59

Kampai

22,848
21
95
95

@Shikharvarshney - Yes i'will wait for a minute – Kampai Dec 08 '14 at 06:20
2

I don't know if anyone has faced this problem. Doing this only blurs the nav bar but my status bar still appears translucent. Any way to fix that? – bachman Jun 10 '15 at 05:50
@NiranjanRavichandran did you try to make the bounds go further to the top of the screen (I didn't try it just came to my mind). – Nuno Gonçalves Sep 27 '15 at 07:09
1

in my case the bar is still white... any other properties need to be changed from interface builder? enabling translucent shows a bit different effect, the one defined by apple for bars – frangulyan Sep 30 '15 at 10:06
@NiranjanRavichandran check the added answer. – Damasio Nov 04 '15 at 13:35
It works but its not identical to the built in blurring of nav bars and tool bars. Edit changed to ExtraLight and it now matches. – malhal Jan 11 '16 at 01:27
4

My back button was an arrow and "back" letters, but now there is only the arrow and when I press it it won't go back. Any idea how to fix this? – Alfro May 18 '16 at 14:36
1

try this visualEffectView.userInteractionEnabled = false – Rafat touqir Rafsun Jul 18 '16 at 05:58
What about Swift 3? – Tarvo Mäesepp Oct 02 '16 at 20:50
Blur effect not showing while table view scrolling up. Any issue with table view? – Rajesh Maurya Oct 19 '18 at 11:19
@Rajesh: Please create a new question and add screenshots and details in that, with code. Paste a link of that question here, so that I can help you. – Kampai Oct 22 '18 at 06:05

score 19 · Answer 2 · answered Feb 11 '18 at 01:44

Swift 4

extension UINavigationBar {
    func installBlurEffect() {
        isTranslucent = true
        setBackgroundImage(UIImage(), for: .default)
        let statusBarHeight: CGFloat = UIApplication.shared.statusBarFrame.height
        var blurFrame = bounds
        blurFrame.size.height += statusBarHeight
        blurFrame.origin.y -= statusBarHeight
        let blurView  = UIVisualEffectView(effect: UIBlurEffect(style: .light))
        blurView.isUserInteractionEnabled = false
        blurView.frame = blurFrame
        blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        addSubview(blurView)
        blurView.layer.zPosition = -1
    }
}

Usage

navigationController?.navigationBar.installBlurEffect()

if you use that solution in detailVC, append this code to the beginning the method `for subview in self.subviews { if subview is UIVisualEffectView { subview.removeFromSuperview() } }` — Leon Jakonda, Mar 02 '22 at 16:32

score 9 · Answer 3 · answered Oct 31 '17 at 07:37

Noted: on iOS 11, function sendSubviewToBack does not work normally. In order to achieve that, we should use zPosition to place the blur effect view under other views.

self.visualEffectView.layer.zPosition = -1;

Objective-C code

[self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
    self.navigationController.navigationBar.shadowImage = [UIImage new];
    self.navigationController.navigationBar.barTintColor = [UIColor whiteColor];
    self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];
    self.navigationController.navigationBar.translucent = YES;
    // Add blur view
    CGRect bounds = self.navigationController.navigationBar.bounds;
    bounds.size.height += 20;
    bounds.origin.y -= 20;
    _visualEffectView = [[UIVisualEffectView alloc] initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]];
    self.visualEffectView.frame = bounds;
    self.visualEffectView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
    self.visualEffectView.userInteractionEnabled = NO;
    self.visualEffectView.layer.zPosition = -1;
    [self.navigationController.navigationBar addSubview:self.visualEffectView];
    [self.navigationController.navigationBar sendSubviewToBack:self.visualEffectView];

Swift 4 code

  self.navigationController?.navigationBar.isTranslucent = true
    self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
    let visualEffectView   = UIVisualEffectView(effect: UIBlurEffect(style: .light))
    var bounds = view.bounds
    bounds.size.height += 20
    bounds.origin.y -= 20
    visualEffectView.isUserInteractionEnabled = false
    visualEffectView.frame = bounds
    visualEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    self.navigationController?.navigationBar.addSubview(visualEffectView)
    visualEffectView.layer.zPosition = -1

Rafat touqir Rafsun · Answer 4 · 2017-09-26T06:59:16.267

I've added @Kampai's,@Damasio's with my tweaks to resolve my issues(which was pushNavigation related).Code will support Swift 4.0+, iOS9, Xcode 9

In your ViewController's ViewDidLoad(), just call

addBlurEffect(toView: self.navigationController?.navigationBar)

function:

   //MARK :- It can be used in navBarGlassEffect view
func addBlurEffect(toView view:UIView?) {
    // Add blur view
    guard let view = view else { return }


    //This will let visualEffectView to work perfectly
    if let navBar = view as? UINavigationBar{
        navBar.setBackgroundImage(UIImage(), for: .default)
        navBar.shadowImage = UIImage()
    }


    var bounds = view.bounds
    bounds.offsetBy(dx: 0.0, dy: -20.0)
    bounds.size.height = bounds.height + 20.0


    let blurEffect = UIBlurEffect(style: .dark)
    let visualEffectView = UIVisualEffectView(effect: blurEffect)

    visualEffectView.isUserInteractionEnabled = false
    visualEffectView.frame = bounds
    visualEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    view.insertSubview(visualEffectView, at: 0)

}

score 3 · Answer 5 · edited May 23 '17 at 12:10

3

If, after @Kampai answer you get the status bar not getting in the effect, add this:

bounds.offsetInPlace(dx: 0.0, dy: -20.0)
bounds.size.height = bounds.height + 20.0

Question addressed in this topic.

edited May 23 '17 at 12:10

Community

1
1

answered Oct 12 '15 at 00:02

Damasio

496
5
14

Eduard Kanevsky · Answer 6 · 2021-05-12T11:09:56.910

Swift 5, iOS 13 +

You can use UINavigationBarAppearance() in AppDelegate file. And don't forget set appearance for not scrolling mode. For me it works perfect with navigationBar.prefersLargeTitles.

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    let appearance = UINavigationBarAppearance()
    appearance.configureWithTransparentBackground()
    appearance.backgroundColor = UIColor.clear
    appearance.backgroundEffect = UIBlurEffect(style: .light) // or dark
    
    let scrollingAppearance = UINavigationBarAppearance()
    scrollingAppearance.configureWithTransparentBackground()
    scrollingAppearance.backgroundColor = .white // your view (superview) color
    
    UINavigationBar.appearance().standardAppearance = appearance
    UINavigationBar.appearance().scrollEdgeAppearance = scrollingAppearance
    UINavigationBar.appearance().compactAppearance = scrollingAppearance
    
    return true
}

Also you can check this link with test project https://github.com/leningradspb/BlurNavigationBar — Eduard Kanevsky, May 12 '21 at 11:06

score 2 · Answer 7 · answered Mar 01 '17 at 16:08

SWIFT 3:

func addBlurEffect(toView view:UIView?) {
        // Add blur view
        guard let view = view else { return }

        //This will let visualEffectView to work perfectly
        if let navBar = view as? UINavigationBar{
            navBar.setBackgroundImage(UIImage(), for: .default)
            navBar.shadowImage = UIImage()
        }

        var bounds = view.bounds
        bounds.offsetBy(dx: 0.0, dy: -20.0)
        bounds.size.height = bounds.height + 20.0

        let blurEffect = UIBlurEffect(style: .dark)
        let visualEffectView = UIVisualEffectView(effect: blurEffect)

        visualEffectView.isUserInteractionEnabled = false
        visualEffectView.frame = bounds
        visualEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        view.insertSubview(visualEffectView, at: 0)

    }

When I push a view controller it adds visual effect view above the navigation bar. Any idea why it is happening? — Karan Bhatia, Mar 21 '17 at 10:12
Just replace one line : bounds = bounds.offsetBy(dx: 0, dy: -20) and all will be working — nerowolfe, Jan 21 '18 at 10:16

score 0 · Answer 8 · answered Jun 02 '16 at 20:15

I first added addBlurEffect() method and then in AppDelegate, I added

 UINavigationBar.appearance().setBackgroundImage(UIImage(), forBarMetrics: .Default)

 UINavigationBar.appearance().shadowImage = UIImage()

 UINavigationBar.appearance().backgroundColor = UIColor.clearColor()

 UINavigationBar.appearance().translucent = true

Now it works for me

score 0 · Answer 9 · answered Jul 29 '17 at 18:41

0

Key note: after u implement above code to add blur view, 1. U need to send your blur view to back to show other things 2. U need to set your blur view user interaction to be false to be able to tap the items on the navigation bar.

answered Jul 29 '17 at 18:41

Developer Sheldon

2,140
1
11
17

yoAlex5 · Answer 10 · 2023-08-04T14:57:36.240

iOS NavigationBar Blur Effect

let navigationBar = self.navigationController?.navigationBar
if #available(iOS 13.0, *) {
    navigationBar?.standardAppearance.backgroundColor = .clear
    navigationBar?.standardAppearance.backgroundEffect = UIBlurEffect(style: .systemMaterial)
}

Don't forget to align your UITableView to superview(not Safe area)
Check that UITableView is on the top in View. In other cases you will see a transparent NavigationBar

score 0 · Answer 11 · answered Jun 27 '23 at 09:44

I had the same issue, but now I can see that this blur is a default behaviour on iOS 16 at least. My mistake was that I pinned UITableView to the view.safeAreaLayoutGuide.topAnchor. To have a blur effect on navigationBar or tabBar you should just pin to the view edge e.g view.topAnchor

score -1 · Answer 12 · answered May 15 '19 at 03:12

This is neoneye's solution from above, which works perfectly, applied to a UIToolbar.

extension UIToolbar {
    func toolBarBlurEffect() {
        isTranslucent = true
        setBackgroundImage(UIImage(), forToolbarPosition: .any, barMetrics: .default)
        let statusBarHeight: CGFloat = UIApplication.shared.statusBarFrame.height
        var blurFrame = bounds
        blurFrame.size.height += statusBarHeight
        let blurView  = UIVisualEffectView(effect: UIBlurEffect(style: .dark))
        blurView.isUserInteractionEnabled = false
        blurView.frame = blurFrame
        blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        addSubview(blurView)
        blurView.layer.zPosition = -1
    }
}

Usage is similar:

navigationController?.toolbar.toolBarBlurEffect()

Real time blur effect for Navigation Bar

12 Answers12

Swift 5

Swift 4

Usage

Linked