How to make UITabBar blurry, in Swift

Question

I am trying to make UITabBar look blur. I am trying to make something like this in this image But my view now looks like this This is my view for tabbar

I tried this code in UITabbarController -

Code:
class TabBarViewController: UITabBarController { 
    override func viewDidLoad() {
        super.viewDidLoad()
        configureTabbar()
    }
    
    func configureTabbar(){
        
        
        let blurEffect = UIBlurEffect(style: .dark)
        let vibrancyEffect = UIVibrancyEffect(blurEffect: blurEffect)

        let vibrancyView = UIVisualEffectView()
        vibrancyView.frame = tabBar.bounds
        vibrancyView.autoresizingMask = .flexibleWidth
        vibrancyView.effect = vibrancyEffect
        tabBar.insertSubview(vibrancyView, at: 0)
        
        tabBar.isTranslucent = true
        tabBar.backgroundImage = UIImage()
        tabBar.backgroundColor = .clear
        tabBar.barStyle = UIBarStyle.black
        tabBar.barTintColor = UIColor.clear
}

score 1 · Accepted Answer · answered Jun 12 '21 at 09:24

1

System bars such as UINavigationBar, UITabBar & UIToolbar are translucent by default and you don't need to add anything extra to get that effect.

You just need to make sure that your view extends it's content under system bars. You can go to storyboard and make sure the Extend Edges - Under Bottom Bars is checked for your UIViewController that you plan to see this effect on.

answered Jun 12 '21 at 09:24

Tarun Tyagi

9,364
2
17
30

I tried your solution @Tarun Tyagi, but it doesn't seem to work as expected. The view looks still the same as earlier. It isn't blurred nor transparent – iosDevSan Jun 12 '21 at 09:45
Most likely you are embedding a `UINavigationController` inside the `UITabBarController`. If that's the case, you need to make sure this `Extend Edges - Under Bottom Bars` setting is checked for the `UINavigationController` as well. – Tarun Tyagi Jun 12 '21 at 09:50
No, I do not have Navigation bar. Its just the tab bar. Its not showing the expected results yet – iosDevSan Jun 12 '21 at 10:15
You can try using `View Hierarchy Debugger` in Xcode that will show you how big your view is or up to where it is extending. You need to make sure that the content you plan to see as blurred actually extends under `UITabBar`. – Tarun Tyagi Jun 12 '21 at 10:18
thank you for your help. I extended my view to appear under the blurred view and it worked. – iosDevSan Jun 15 '21 at 06:59

How to make UITabBar blurry, in Swift

1 Answers1