how can I remove the top border on UIToolBar

Question

I have set my UIToolBar tint color to some value, and there is this border line that I see in which I want to remove:

enter image description here

How do I remove this black border>

score 145 · Answer 1 · edited Jul 05 '13 at 14:24

145

You can do like this:

self.navigationController.toolbar.clipsToBounds = YES;

edited Jul 05 '13 at 14:24

Navnath Godse

2,233
2
23
32

answered Jan 21 '13 at 22:50

totalitarian

3,606
6
32
55

2

That didn't help me in iOS 6 – DrMickeyLauer Apr 19 '13 at 10:24
2

This works for a bare UIToolbar as well; doesn't have to be part of a navigation controller. – J. Perkins Nov 04 '13 at 15:29
Works like a charm on iOS 7.x with SDK 7. – eonil Jun 25 '14 at 08:50
*Nico*, this is working because "clipsToBounds" makes a view draw only within it's bounds. in this case, a layer's border draws outside of the view's bounds, so settings "clipsToBounds" to true "disable" it's border. – Ariel Jan 02 '17 at 10:10
4

`clipsToBounds = YES` breaks a toolbar's look on the iPhone X. It hides the top border, but it also stops the toolbar's background from extending to the bottom edge of the screen. – ksm Nov 09 '17 at 13:16
In my case, I am just using the toolbar as the `inputAccessoryView` for a text field (displayed above the keyboard), so the bottom safe area is no issue. – Nicolas Miari Oct 31 '18 at 04:49

score 50 · Answer 2 · edited Mar 14 '14 at 13:33

50

toolbar1.clipsToBounds = YES;

Worked for me incase someone is still trying with Navigational bar

edited Mar 14 '14 at 13:33

slfan

8,950
115
65
78

answered Mar 14 '14 at 13:14

Ravi Mudaliar - Seffcon

509
4
2

3

This causes the bottom to be cut off at the safe area boundary on iPhone X – E-Madd Nov 09 '17 at 16:34

Keenan · Accepted Answer · 2018-02-26T16:27:20.617

21

Correct answer is the one by totalitarian...FYI. https://stackoverflow.com/a/14448645/627299

My response is still below for reference.

Here's what I did with my WHITE background toolbar...

whiteToolBar.layer.borderWidth = 1;
whiteToolBar.layer.borderColor = [[UIColor whiteColor] CGColor];

Perhaps you could do the same thing with your color instead.

edited Feb 26 '18 at 16:27

answered Mar 15 '12 at 02:53

Keenan

376
4
15

23

It's much cleaner to use whiteToolBar.clipToBounds = YES – jomafer Sep 04 '14 at 06:49
3

Swift for @jomafer's comment: `myToolbar.clipsToBounds = true` – Nov 30 '18 at 04:07
I hereby join the club of people thanking their past self – May 28 '19 at 00:41
Set Clips To Bounds in either Interface Builder or as mentioned above, it's. a better solution. – Peter Suwara Jun 17 '19 at 08:39
2

`clipToBounds` is not ideal since iPhone X because it will leave the safe area blank – João Souza Jan 04 '20 at 19:18

score 17 · Answer 4 · answered Sep 30 '16 at 10:54

17

setShadowImage to [UIImage new]

answered Sep 30 '16 at 10:54

Cherpak Evgeny

2,659
22
29

4

Without a doubt, the proper answer – beebcon Dec 23 '16 at 17:29
2

This is the one you need to use to avoid losing toolbar color in safe areas such as at bottom of iPhone X i.e. [self setShadowImage:UIImage.new forToolbarPosition:UIBarPositionAny]; – gpdawson Oct 17 '18 at 04:33

score 12 · Answer 5 · answered Jan 29 '19 at 05:41

12

navigationController?.toolbar.barTintColor = .white

navigationController?.toolbar.setShadowImage(UIImage(), forToolbarPosition: .any)

answered Jan 29 '19 at 05:41

damo

849
12
16

score 4 · Answer 6 · answered Apr 19 '13 at 10:24

4

Setting the style to UIBarStyleBlackTranslucent did it for me (iOS 6)

answered Apr 19 '13 at 10:24

DrMickeyLauer

4,455
3
31
67

score 3 · Answer 7 · answered Dec 13 '17 at 15:37

3

create a 1 pixel x 1 pixel clear image and call it clearPixel.png

toolbar.setShadowImage(UIImage(named: "clearPixel.png"), forToolbarPosition: UIBarPosition.any)

answered Dec 13 '17 at 15:37

alionthego

8,508
9
52
125

3

Can also simply do `UIImage()`, no need for an asset – Jordan H Jan 10 '18 at 01:42

score 2 · Answer 8 · edited May 23 '17 at 10:30

2

this doesn't work consistently on iOS versions, doesn't seem to work on iOS7. i answered this in another question: https://stackoverflow.com/a/19893602/452082 and you can modify that solution to just remove the background shadow (and leave your toolbar.backgroundColor whatever color you like)

edited May 23 '17 at 10:30

Community

1
1

answered Nov 10 '13 at 18:52

natbro

1,038
12
13

score 2 · Answer 9 · answered Oct 29 '17 at 18:05

The clipsToBounds technique clips the UIToolBar's shadow as well as the background view. On an iPhone X, that means the background no longer reaches outside the safe area.

The solution below uses a mask to clip only the top of the UITabBar. The mask is rendered in a UIToolBar subclass, and the mask frame is kept updated in an override of layoutSubviews.

class Toolbar: UIToolbar {

    fileprivate let maskLayer: CALayer = {
        let layer = CALayer()
        layer.backgroundColor = UIColor.black.cgColor
        return layer
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        initialize()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        initialize()
    }

    fileprivate func initialize() {
        layer.mask = maskLayer
        // Customize toolbar here
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        // height is an arbitrary number larger than the distance from the top of the UIToolbar to the bottom of the screen
        maskLayer.frame = CGRect(x: -10, y: 0, width: frame.width + 20, height: 500)
    }

}

This works for me on any device BUT the iPhone X. I copied the code line-for-line, creating a new Swift class and specifying the class in Interface Builder. — E-Madd, Nov 06 '17 at 20:10
@E-Madd Perhaps the Interface Builder is the difference. In our setup, we are programmatically creating the UINavigationController with a UINavigationBar and UIToolbar subclass, like so: `let navigationController = UINavigationController(navigationBarClass: NavigationBar.self, toolbarClass: Toolbar.self)` — Alex, Nov 07 '17 at 23:16
I refactored to this with no change. I still have the border. Actually, it seems to be a gap between the main view and the toolbar. — E-Madd, Nov 09 '17 at 16:53

score 1 · Answer 10 · answered Mar 23 '15 at 23:14

I got a bit confused with these answers but I was missing the point that you were using an Outlet so just to be clear here is the swift code I used to hide the border:

import UIKit

class ViewController: UIViewController {

    //MARK Outlets
    @IBOutlet weak var ToolBar: UIToolbar!

    //MARK View Functions
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        // Hide the bottom toolbar's top border
        ToolBar.clipsToBounds = true
    }
}

I had dragged a toolbar to the bottom of a view for this and it's not the top nav bar some other questions refer to.

Great, this worked. Could you explain why, though? Thanks. – redcurry Mar 28 '16 at 01:59 — redcurry, Mar 28 '16 at 01:59

score 0 · Answer 11 · answered Jan 21 '20 at 13:31

[[UIToolbar appearance] setBackgroundImage:[[UIImage alloc] init] forToolbarPosition:UIBarPositionBottom barMetrics:UIBarMetricsDefault];

[[UIToolbar appearance] setShadowImage:[[UIImage alloc] init] forToolbarPosition:UIBarPositionBottom];

[UIToolbar appearance].barTintColor = [UIColor ...];```

how can I remove the top border on UIToolBar

11 Answers11

Linked