Remove top line from TabBar

Question

On iOS 10 this code doesn't work in order to remove the tabBar shadow line:

[[UITabBar appearance] setShadowImage:[[UIImage alloc] init]];

Somebody knows, what must I do to remove it?

On iOS 9.3 with this two lines the line is removed, but iOS 10 ignores setShadowImage command.

The last line of the documentation for shadowImage says that if backgroundImage is nil then shadowImage is ignored and a default shadow is applied. So try removing the setBackgroundImage to see what happens. — iCyberPaul, Oct 04 '16 at 12:09
The issue is that I need to set image to tabBar background... — jcamacho, Oct 04 '16 at 14:27
@mitulmarsonia The screen capture from iOs 10 simulator http://i65.tinypic.com/24uw9vl.png — jcamacho, Oct 04 '16 at 14:32

sahiljain · Accepted Answer · 2019-10-11T11:38:59.403

47

removes the topline for @iOS 13.0

let appearance = tabBar.standardAppearance
appearance.shadowImage = nil
appearance.shadowColor = nil
tabBar.standardAppearance = appearance;

removes the topline for iOS 12.0 and earlier

tabBar.shadowImage = UIImage()
tabBar.backgroundImage = UIImage()

edited Oct 11 '19 at 11:38

answered Jan 21 '18 at 17:47

sahiljain

2,215
1
29
39

4

Doesn't work on iOS13 anymore! Have anyone tried? There's a new `tabBar.standardAppearance.shadowImage` but it doesn't work at all... – SoftDesigner Sep 14 '19 at 08:29
3

@SoftDesigner i have same problem, have you find any solution for iOS 13? – Yogendra Patel Oct 07 '19 at 07:12
@YogendraPatel I'm using a custom shadow image which I'm adding to the tab bar directly: `tabBar.addSubview(shadowImageView)`. It overlaps the standard 1px line. – SoftDesigner Oct 07 '19 at 16:13
Updated the answer for iOS 13.0 – sahiljain Sep 16 '20 at 08:50
appearance messes up unselected tab color – Markon Jan 21 '21 at 15:13

Mitul Marsoniya · Answer 2 · 2016-10-15T13:18:26.510

42

Just try to bellow code for iOS 10 :-

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // Override point for customization after application launch.
    [[UITabBar appearance] setBackgroundImage:[UIImage imageNamed:@"fondoTabBar"]];
    [UITabBar appearance].layer.borderWidth = 0.0f;
    [UITabBar appearance].clipsToBounds = true;
    return YES;
}

Swift 3.x

UITabBar.appearance().layer.borderWidth = 0.0
UITabBar.appearance().clipsToBounds = true

edited Oct 15 '16 at 13:18

answered Oct 04 '16 at 17:53

Mitul Marsoniya

5,272
4
33
57

This code is that I using until iOs 10. This code works on prior iOs 10 device, but on iOs 10 doesn't work. – jcamacho Oct 05 '16 at 06:07
Can you please try this demo its work for iOS 10 :- https://www.dropbox.com/sh/g4cpq282b7adyg0/AADk3jBHshvsQ-FNIWwzuOOZa?dl=0 – Mitul Marsoniya Oct 05 '16 at 10:08
Thanks for your sample code. This code works on iOs 10 but I need to change tabBar background, when I change background the line is show. This code is the same only I added a background image and you can see that the shadow image is shows on iOs 10, on iOs 9.3 works fine and the line is hidden. https://1drv.ms/u/s!AlMk_BUOGnOImYtdCSCp6f1MGOu_AQ – jcamacho Oct 05 '16 at 16:58
@Camacho I have update my answer please review now your issue is fixed. – Mitul Marsoniya Oct 06 '16 at 06:26
2

and thanks to Indian developer community, this isn't first time that you help me with an iOs question on stackoverflow, thank you so much! – jcamacho Oct 06 '16 at 08:39
Welcome :) Happy coding :) – Mitul Marsoniya Oct 06 '16 at 08:58
Hi, is there any way to do this without getting rid of the tab bar's shadow as well? When I did this, it worked, but the tab bar's shadow also disappeared. – Ethan Zhao Jun 20 '19 at 15:18
@EthanZhao Sorry i don't know other way. – Mitul Marsoniya Jun 21 '19 at 04:04

score 9 · Answer 3 · answered Feb 10 '20 at 00:02

Working Solution as of iOS 13.3

// remove top line
if #available(iOS 13.0, *) {
    // ios 13.0 and above
    let appearance = tabBar.standardAppearance
    appearance.shadowImage = nil
    appearance.shadowColor = nil
    appearance.backgroundEffect = nil
    // need to set background because it is black in standardAppearance
    appearance.backgroundColor = .someColor
    tabBar.standardAppearance = appearance
} else {
    // below ios 13.0
    let image = UIImage()
    tabBar.shadowImage = image
    tabBar.backgroundImage = image
    // background
    tabBar.backgroundColor = .someColor
}

This answer should be the correct one, because the answer marked as correct changes the color of the tabbar when applies the appearance. — Diego Jiménez, Jan 10 '21 at 19:23

denis_lor · Answer 4 · 2021-06-07T07:27:59.600

8

Tested on iOS 14

override func viewDidLoad() {
    // Remove default border line
    tabBar.shadowImage = UIImage()
    tabBar.backgroundImage = UIImage()
    tabBar.backgroundColor = UIColor.white
}

edited Jun 07 '21 at 07:27

answered May 27 '19 at 08:12

denis_lor

6,212
4
31
55

score 8 · Answer 5 · answered Sep 20 '19 at 16:04

For iOS 13

if (@available(iOS 13.0, *)) {
    UITabBarAppearance *appearance = [self.tabBarController.tabBar.standardAppearance copy];
    appearance.shadowImage = nil;
    appearance.shadowColor = nil;
    self.tabBarController.tabBar.standardAppearance = appearance;
}

kironet · Answer 6 · 2019-10-26T13:54:54.873

5

This works for me @iso13:

AppDelegate.swift

UITabBar.appearance().clipsToBounds = true
UITabBar.appearance().shadowImage = nil

or

UITabBar.appearance().clipsToBounds = true
UITabBar.appearance().layer.borderWidth = 0

or

UITabBar.appearance().clipsToBounds = true
UITabBar.appearance().layer.borderColor = UIColor.clear.cgColor

edited Oct 26 '19 at 13:54

answered Oct 26 '19 at 13:49

kironet

766
2
11
27

score 2 · Answer 7 · answered Oct 21 '16 at 19:42

2

For iOS 10 changed tabbar style to black did the trick

self.tabBarController.tabBar.shadowImage = UIImage()
self.tabBarController.tabBar.barStyle = .Black

answered Oct 21 '16 at 19:42

Hamdan Javed

309
4
3

score 2 · Answer 8 · answered Oct 31 '19 at 08:15

You can do it this way in your FirstViewController.swift:
Swift 4.2

self.tabBarController!.tabBar.layer.borderWidth = 0.50
self.tabBarController!.tabBar.layer.borderColor = UIColor.clear.cgColor
self.tabBarController?.tabBar.clipsToBounds = true

Just change border color as you want.

score 1 · Answer 9 · answered Feb 14 '17 at 09:40

1

You should implement the following two methods at the same time:

[[UITabBar appearance] setShadowImage:[UIImage new]];
[[UITabBar appearance] setBackgroundImage:[UIImage new]];

answered Feb 14 '17 at 09:40

BabyFish

11
2

score 1 · Answer 10 · answered Oct 30 '17 at 07:47

It's a shadow image (property) of tabbar. Try following solutions and see.

Try this, ** Objective-C **

//Remove shadow image by assigning nil value.
[[UITabBar appearance] setShadowImage: nil];

// or 

// Assing UIImage instance without image reference
[[UITabBar appearance] setShadowImage: [[UIImage alloc] init]];

** Swift **

//Remove shadow image by assigning nil value.
UITabBar.appearance().shadowImage = nil

// or 

// Assing UIImage instance without image reference
UITabBar.appearance().shadowImage = UIImage()

Here is apple guideline for shadowImage.

@available(iOS 6.0, *)
open var shadowImage: UIImage?

Default is nil. When non-nil, a custom shadow image to show instead of the default shadow image. For a custom shadow to be shown, a custom background image must also be set with -setBackgroundImage: (if the default background image is used, the default shadow image will be used).

score 1 · Answer 11 · answered Oct 02 '19 at 18:50

1

I don't have the reputation to comment but to add to gnoix's answer, I had a slightly different problem in that I wanted the shadow and the background clear so I had in Swift

if #available(iOS 13.0, *) {
    let appearance = tabBar.standardAppearance.copy()
    appearance.configureWithTransparentBackground()
    tabBar.standardAppearance = appearance
} else {
    tabBar.backgroundColor = UIColor.clear
    let image = UIImage(ciImage: CIImage(color: CIColor.clear)).af_imageAspectScaled(toFit: tabBar.bounds.size)
    tabBar.backgroundImage = image
    tabBar.shadowImage = image
}

answered Oct 02 '19 at 18:50

Andrew

689
5
6

`appearance.configureWithTransparentBackground()` works for me as I have shadow on tabBar layer as well. – Yuan Fu Oct 04 '19 at 23:23
Question is about removing just the topline of the tabbar and not about making tabbar background transparent. – sahiljain Oct 11 '19 at 11:43

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

0

I had the same problem in ios 10. I fixed this issue just changing the height of UITabBar (by default is 49). Check it here how to change the height.

edited May 23 '17 at 12:10

Community

1
1

answered Oct 27 '16 at 07:01

Alexander Karpov

530
1
7
16

score 0 · Answer 13 · answered Jul 04 '17 at 08:22

If you create your own subclass of UITabBarController, you can set the values in viewDidLoad like this

Swift 3

override func viewDidLoad() {
        super.viewDidLoad()
        self.tabBar.layer.borderWidth = 0
        self.tabBar.clipsToBounds = true
}

score 0 · Answer 14 · edited Oct 02 '20 at 18:13

0

As for me, the solution with tabBar appearance didn't work because it ignored my tabBar.itemPositioning = .centered in that case.

The thing that works for me is tabBar.barStyle = .black.

And don't forget to set tabBar.backgroundColor = .white or any other color your prefer.

edited Oct 02 '20 at 18:13

marc_s

732,580
175
1,330
1,459

answered Sep 19 '20 at 16:30

Alexander Saenko

66
7

score 0 · Answer 15 · edited Oct 15 '20 at 10:24

0

If you are using storyboard thats an way On tab bar controller, select the "tab bar"

Like in this image

and then add an runtime attribute "clipsToBounds" bool:

like in this image

edited Oct 15 '20 at 10:24

fcdt

2,371
5
14
26

answered Oct 15 '20 at 02:54

Bruno Susigan Nagy

1
2

Remove top line from TabBar

15 Answers15

Linked