Remove UITabbar upper border line

Question

I have been using UITabbar in an app. There is an upper border line coming in top of the UITabbar. Refer below image :-

I Googled it and tried the suggested code like :-

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

Also

[[UITabBar appearance] setShadowImage:nil];

self.navigationController.toolbar.clipsToBounds = YES;

But none of them is working. Any solution?

**iOS 10.X** have some changes so please follow [THIS ANSWER](http://stackoverflow.com/a/39858796/3752143). — Mitul Marsoniya, Oct 06 '16 at 09:33

score 23 · Answer 1 · edited Oct 17 '22 at 12:27

23

tabBar.clipsToBounds = YES; works for me.

edited Oct 17 '22 at 12:27

Bill

44,502
24
122
213

answered Feb 08 '17 at 09:12

Allen

6,745
5
41
59

really great! No need to do anything else - just single line. Thanks buddy – Saurabh Prajapati Mar 17 '20 at 09:05

score 13 · Accepted Answer · answered Sep 18 '15 at 06:59

13

[self.tabBar setValue:@(YES) forKeyPath:@"_hidesShadow"];

or you can use

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

or

 [[UITabBar appearance] setShadowImage:nil];

answered Sep 18 '15 at 06:59

Usama

548
3
12

As you are adding background image also so just hide the shadow. – Usama Sep 18 '15 at 07:01
you mean i need a transparent image? – Awesome.Apple Sep 18 '15 at 07:02
no need to add transparent image if you don't want any image for shadow at all. just pass nil. see my edited answer. – Usama Sep 18 '15 at 07:04
Awesome usama first line is working i.e [self.tabBar setValue:@(YES) forKeyPath:@"_hidesShadow"]; – Awesome.Apple Sep 18 '15 at 07:05
Be aware, the forKeyPath solution may cause a crash on 32 bit devices (at least using Swift). the imageNamed solution worked for me in Swift, but the last one did not. – ransomweaver Oct 06 '15 at 16:25

Baran · Answer 3 · 2019-10-30T07:55:44.803

Working solution with iOS 13 & Swift 5:

/** 
 * A custom subclass of `UITabBarController` to use whenever you want 
 * to hide the upper border of the `UITabBar`.
 */
class TabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()
        tabBar.backgroundColor = UIColor.white

        // Removing the upper border of the UITabBar.
        // 
        // Note: Don't use `tabBar.clipsToBounds = true` if you want 
        // to add a custom shadow to the `tabBar`!
        // 
        if #available(iOS 13, *) {
            // iOS 13:
            let appearance = tabBar.standardAppearance
            appearance.configureWithOpaqueBackground()
            appearance.shadowImage = nil
            appearance.shadowColor = nil
            tabBar.standardAppearance = appearance
        } else {
            // iOS 12 and below:
            tabBar.shadowImage = UIImage()
            tabBar.backgroundImage = UIImage()
        }
    } 
}

@JsW are you doing some other additional adjustments to the UITabBar? — Baran, Dec 27 '19 at 12:27

score 7 · Answer 4 · answered Jun 12 '18 at 14:28

7

This worked for me for iOS 11, XCode 9.4

UITabBar.appearance().shadowImage = UIImage()
UITabBar.appearance().backgroundImage = UIImage()
UITabBar.appearance().backgroundColor = UIColor.white

answered Jun 12 '18 at 14:28

Miha Hribar

5,776
3
26
24

score 5 · Answer 5 · answered Jul 07 '19 at 08:30

5

Swift 5 Works for me

override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        myTabBar.clipsToBounds = true


    }

answered Jul 07 '19 at 08:30

omar alfawzan

51
1
2

do it in class UITabBarController – omar alfawzan Jul 07 '19 at 08:34

score 3 · Answer 6 · answered Aug 24 '18 at 17:40

3

Improving on one of the answers above - still a bit of a hack but works better. The answer above would hide the imageView with custom image.

    for tabBarSubview in self.tabBar.subviews {
        let tabBarSubviewName = String(describing: type(of: tabBarSubview))
        guard tabBarSubviewName == "_UIBarBackground" else { continue }
        tabBarSubview.clipsToBounds = true
    }

answered Aug 24 '18 at 17:40

videolist

219
3
4

Thanks, This is called the perfect answer. Huge respect from me. – Mehul Oct 24 '19 at 11:07

Nitin Gohel · Answer 7 · 2015-09-18T07:05:48.750

1

You need to add only this two line of code for remove border from your UITabbar:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {


    [[UITabBar appearance] setBackgroundImage:[[UIImage alloc] init]];
    [[UITabBar appearance] setShadowImage:[[UIImage alloc] init]];
    // Override point for customization after application launch.
    return YES;
}

Before:

After:

UPDATE: You canset background image as well and set shadow as a nil like following code

    UIImage* tabBarBackground = [UIImage imageNamed:@"tabbar.png"];
    [[UITabBar appearance] setShadowImage:[[UIImage alloc] init]];
    [[UITabBar appearance] setBackgroundImage:tabBarBackground];

OUTPUT:

edited Sep 18 '15 at 07:05

answered Sep 18 '15 at 06:58

Nitin Gohel

49,482
17
105
144

This works but i need to set background image also. So if i remove first line then it shows the line – Awesome.Apple Sep 18 '15 at 07:00
1

This is not working swift 3 xcode 8. How can I remove this line? – Savas Adar Aug 15 '17 at 15:59

score 1 · Answer 8 · answered Aug 31 '17 at 17:23

shadowImage property of UITabbar is responsible for this border line (gray colored shadow) on UITabbar. Update value of this property to remove it.

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 0 · Answer 9 · answered Apr 26 '18 at 07:17

I could not find an answer without clipping to bounds. And the way using UITabBar.appearance().shadowImage seems to be outdated

So I made a not perfect but working and safe solution to remove UITabBar shadow for iOS10 and iOS11 without clipping to bounds. Works on iPhone X too (would be strange if it did not ;) )

The code below runs through the UITabBarController hierarchy and looks for a shadow view. Which (for now) is UIImageView that is a subview of _UIBarBackground

extension UITabBarController {
    public func hideTopShadow() {
        // looking for tabBar
        for subview in self.view.subviews {
            let tabBarSubviewName = String(describing: type(of: subview))
            guard tabBarSubviewName == "UITabBar" else { continue }

            // looking for _UIBarBackground. The other subivews are UITabBarButtons
            for tabBarSubview in subview.subviews {
                let tabBarSubviewName = String(describing: type(of: tabBarSubview))
                guard tabBarSubviewName == "_UIBarBackground" else { continue }

                // looking for UIImageView. This is the only subview
                for shadowView in tabBarSubview.subviews where shadowView is UIImageView {
                    shadowView.isHidden = true
                    return
                }
            }
        }
        print(" **** ERROR: Could not find the shadow view \(self.self) \(#function)")
    }
}

Possible usage. I have a subclass of UITabBarController so I did following:

// to avoid excessive runs through the hierarchy after the shadow was hidden
fileprivate var hasHiddenShadow: Bool = false

override open func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    guard !hasHiddenShadow else { return }

    hasHiddenShadow = true
    DispatchQueue.main.asyncAfter(deadline: .now()) {
        self.hideTopShadow()
    }
}

score 0 · Answer 10 · answered Nov 27 '19 at 15:09

update your controller method

override func viewDidLoad() {
    super.viewDidLoad()
    self.tabBar.clipsToBounds = true
    if #available(iOS 13, *) {
        self.tabBar.standardAppearance.shadowImage = nil
        self.tabBar.standardAppearance.shadowColor = nil
    }
}

score 0 · Answer 11 · answered Dec 30 '20 at 08:43

0

self.navigationController?.setNavigationBarHidden(true, animated: true)

worked for me

answered Dec 30 '20 at 08:43

Harsh Dev Chandel

763
5
12

Remove UITabbar upper border line

11 Answers11

Linked