iOS - Getting desired shadow above UITabBar

Question

I am trying to get my tab bar shadow to look like the one seen in this image:

What is the best way of doing this? I am using objective-c
Thanks

score 34 · Accepted Answer · edited Feb 08 '21 at 20:17

34

You can give shadow by using following code to any UI object

tabBar.layer.shadowOffset = CGSize(width: 0, height: 0)
tabBar.layer.shadowRadius = 2
tabBar.layer.shadowColor = UIColor.black.cgColor
tabBar.layer.shadowOpacity = 0.3

Here i gave example for your tabControl object.

edited Feb 08 '21 at 20:17

Anurag Sharma

4,276
2
28
44

answered May 20 '16 at 05:31

Shreyank

1,549
13
24

1

Thanks, this is exactly what I wanted. If anyone wanted to know, to make it look like that image, I used a shadow radius of 8 and a shadow opacity of 0.3. Once again, thank you! – rohinb May 20 '16 at 05:37
This doesn't work for me. (iOS 13+) Has there been some change in the intervening years? The above puts a drop shadow around the tabBarItems in the tab bar instead of a shadow above the tab bar itself. – Daniel T. Aug 23 '22 at 13:23

score 15 · Answer 2 · edited Feb 08 '21 at 20:16

15

For Swift 5 :

tabBar.layer.shadowOffset = CGSize(width: 0, height: 0)
tabBar.layer.shadowRadius = 2
tabBar.layer.shadowColor = UIColor.black.cgColor
tabBar.layer.shadowOpacity = 0.3

edited Feb 08 '21 at 20:16

Anurag Sharma

4,276
2
28
44

answered Jul 13 '18 at 18:52

Hamid Reza Ansari

1,107
13
16

score 12 · Answer 3 · answered Sep 29 '17 at 20:15

12

Swift 4:

tabBar.layer.shadowOffset = CGSize(width: 0, height: 0)
tabBar.layer.shadowRadius = 2
tabBar.layer.shadowColor = UIColor.black.cgColor
tabBar.layer.shadowOpacity = 0.3

answered Sep 29 '17 at 20:15

Quinton Wall

178
1
2

SoftDesigner · Answer 4 · 2022-10-12T13:05:17.143

5

I'd prefer to use a dedicated tab bar methods.

// Set `backgroundImage` to be able to use `shadowImage`
let tabBarAppearance = UITabBar.appearance()

if #available(iOS 15.0, *) {
    let appearance = UITabBarAppearance()

    appearance.shadowImage = UIImage(named: "tab_shadow")
    tabBarAppearance.standardAppearance = appearance
    tabBarAppearance.scrollEdgeAppearance = appearance
} else {
    tabBarAppearance.backgroundImage = UIImage.imageWithColor(.white)
    tabBarAppearance.shadowImage = #imageLiteral(resourceName: "tab_bar_shadow") // 2x34pt works for me
}

edited Oct 12 '22 at 13:05

answered Nov 01 '17 at 11:53

SoftDesigner

5,640
3
58
47

But how did you get the "tab_shadow" image from the shadow parameters? – MrKew Feb 09 '23 at 14:13
@MrKew this is my custom image, semi-transparent pixels – SoftDesigner Feb 09 '23 at 14:34
1

Yeah, but I have the only the shadow parameters like offset, blur, color, ... But I solved it by creating an UIImage from the shadow using UIGraphicsImageRenderer – MrKew Feb 10 '23 at 11:40

Saifan Nadaf · Answer 5 · 2019-01-23T12:28:10.227

Swift 4:

Use This Extension

extension UIImage {
class func colorForNavBar(color: UIColor) -> UIImage {
    //let rect = CGRectMake(0.0, 0.0, 1.0, 1.0)

    let rect = CGRect(origin: CGPoint(x: 0,y :0), size: CGSize(width: 1.0, height: 1.0))

    UIGraphicsBeginImageContext(rect.size)
    let context = UIGraphicsGetCurrentContext()

    context!.setFillColor(color.cgColor)
    context!.fill(rect)

    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()


     return image!
    } 
}

Set Shadow Color Using RGB

//Set BackgroundColor
 UITabBar.appearance().backgroundImage = UIImage.colorForNavBar(color: .white)

//Set Shadow Color
 UITabBar.appearance().shadowImage = UIImage.colorForNavBar(color: UIColor.init(red: 120/255.0, green: 120/255.0, blue: 120/255.0, alpha: 1.0))

Please explain `colorForNavBar ` method. – Alexey Savchenko Jan 14 '19 at 16:05 — Alexey Savchenko, Jan 14 '19 at 16:05
@AlexeySavchenko extension Added...! – Saifan Nadaf Jan 17 '19 at 09:49 — Saifan Nadaf, Jan 17 '19 at 09:49

score 0 · Answer 6 · answered Jan 25 '22 at 08:44

self.tabBarController.tabBar.shadowImage = [[UIImage alloc] init];
self.tabBarController.tabBar.backgroundImage = [[UIImage alloc] init];
self.tabBarController.tabBar.backgroundColor = [UIColor whiteColor];
self.tabBarController.tabBar.layer.shadowOffset = CGSizeMake(0, 0);
self.tabBarController.tabBar.layer.shadowRadius = 1;
self.tabBarController.tabBar.layer.shadowColor = [UIColor blackColor].CGColor;
self.tabBarController.tabBar.layer.shadowOpacity = 0.2;

score -2 · Answer 7 · answered May 20 '16 at 05:21

-2

Try This one

 [[UITabBar appearance] setShadowImage:[UIImage imageNamed:@"transparentShadow.png"]];

answered May 20 '16 at 05:21

Vijay Kachhadiya

366
2
11

without the image, this comment is useless. – CW0007007 Mar 31 '23 at 13:08

iOS - Getting desired shadow above UITabBar

7 Answers7

Linked