How to make UIToolbar have a Clear Background?

Question

I have a UIToolbar that has a white tint, with a bar button item, followed by some flexible space, followed by another bar button item. I would like to make the toolbar completely clear so that I can see what is under the flexible space (I don't care about seeing what is behind the buttons). Is there a way to do this? I have tried setting the toolbar to translucent, but that does not make it completely clear.

possible duplicate of [Transparent UIToolbar](http://stackoverflow.com/questions/6250439/transparent-uitoolbar) — trojanfoe, Aug 21 '12 at 15:48
Hey guys, sorry about the duplicate. I didn't notice the other one. Please close the question and mark as duplicate. — Kyle Rosenbluth, Aug 21 '12 at 16:49

score 65 · Accepted Answer · answered Apr 16 '13 at 11:24

65

[self.toolbar setBackgroundImage:[UIImage new]
              forToolbarPosition:UIToolbarPositionAny
                      barMetrics:UIBarMetricsDefault];

 [self.toolbar setBackgroundColor:[UIColor clearColor]];

answered Apr 16 '13 at 11:24

Ievgen

1,596
16
13

This approach was the only one working when inserting a transparent UIToolbar as a NavigationItem.TitleView. – Miros Jul 16 '13 at 12:53
3

On ios7.1, i'm seeing a 1px border (shadow?) at the top of the toolbar. – Chris Mar 18 '14 at 05:27
@Chris, I noticed the same thing. Not sure how to fix it. Luckily i'm needing to do this in a popup where the view's border color is black. So i've just moved the toolbar up so the shadow (or whatever it is) gets lost in the border. – Andrew Mar 19 '14 at 16:25
10

@Andrew - I used setShadowImage:forToolbarPosition: to set the shadow image to [[UIImage alloc] init] – Chris Mar 20 '14 at 22:04
Note: if a toolbar is added to the scene, it is *not* referenced by self.navigationController.toolbar - this is the default one owned by the navigationController (see http://stackoverflow.com/a/8753847/481207). – Matt Dec 09 '14 at 19:45
Swift Version .: self.toolbar.isTranslucent = true self.toolbar.setBackgroundImage(UIImage(), forToolbarPosition: UIBarPosition.any, barMetrics: UIBarMetrics.default) self.toolbar.setShadowImage(UIImage(), forToolbarPosition: UIBarPosition.any) – Vivek Dec 26 '17 at 12:16

score 8 · Answer 2 · edited May 23 '17 at 11:46

8

Subclass UIToolbar, and implement the below method:

- (void)drawRect:(CGRect)rect 
{
  [[UIColor colorWithWhite:0 alpha:0.6f] set]; // or clearColor etc
  CGContextFillRect(UIGraphicsGetCurrentContext(), rect);
}

see more details here

edited May 23 '17 at 11:46

Community

1
1

answered Aug 21 '12 at 15:29

Shamsudheen TK

30,739
9
69
102

So this is a duplicate question? – trojanfoe Aug 21 '12 at 15:48
Close the question and mark it a duplicate of the one you linked to. – trojanfoe Aug 21 '12 at 15:55
This is indeed the correct way to do it. It is quite an annoyance though that it cannot be customized without subclassing... – MikeS Aug 21 '12 at 17:00
You can customize it without subclassing - see @NANNAV's point below. More elegant IMHO, mind you -1 doesn't fit into UIBarStyle's enum in `UIInterface.h`. But what could possibly go wrong? :S – Scott Corscadden Nov 13 '13 at 16:56
Excellent for my case, however not for every one will suit – Vladimir Stazhilov Dec 02 '14 at 15:23

score 5 · Answer 3 · answered Jul 10 '13 at 13:38

5

set toolbarStyle -1 like this

 tools.barStyle = -1; // clear background

answered Jul 10 '13 at 13:38

NANNAV

4,875
4
32
50

Works for me on iOS 11! – Alex Black Jun 04 '19 at 14:11
This was the only approach that worked for me with Xcode 13 and iOS 15. But as the other postings mention it leaves a 1 px dark bar at the top to the toolbar – LancDec Mar 10 '22 at 19:04
This works well in light mode but not dark mode, will have to use the recommended (with setShadow too) to completely fix this – Tj3n Jun 02 '22 at 06:58
Xcode 15 beta 5 -> Cannot assign value of type 'Int' to type 'UIBarStyle', can't seem to hack my way around it... – benc Aug 21 '23 at 19:24

score 2 · Answer 4 · answered Nov 14 '13 at 14:53

2

Hacky, sorry, but the only way I've found so far that reliably works in both iOS 7 and iOS 6 is to do this:

[[toolbar.subviews objectAtIndex:0] removeFromSuperview];

answered Nov 14 '13 at 14:53

Danyal Aytekin

4,106
3
36
44

1

always use prefer `firstObject` instead of `objectAtIndex:0` – Laszlo Sep 27 '16 at 11:49
Thanks @Tuss. In my defence, in iOS 6, `firstObject` was a private API. ;) – Danyal Aytekin Sep 29 '16 at 17:41

score 1 · Answer 5 · answered Apr 21 '14 at 01:02

If you want a global solution take advantage of the UIAppearance proxy:

UIToolbar *toolbarAppearance = [UIToolbar appearance]; [toolbarAppearance setBackgroundImage:[[UIImage alloc] init] forToolbarPosition:UIBarPositionAny barMetrics:UIBarMetricsDefault];

score 1 · Answer 6 · answered Jun 05 '20 at 13:07

There is a solution in @ievgen answer in Swift 5.1

toolbar.setBackgroundImage(UIImage(), forToolbarPosition: .any, barMetrics: .default)
toolbar.backgroundColor = .clear

If you want to clear the separator gray line

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

score 0 · Answer 7 · answered Dec 13 '12 at 05:54

It can be done without subclassing in iOS 6+ with setting the property translucent to `YES.

This will not work in iOS 5 in below. Here's how it can be done without subclassing toolbar:

const float colorMask[6] = {222, 255, 222, 255, 222, 255};
UIImage *img = [[UIImage alloc] init];
UIImage *maskedImage = [UIImage imageWithCGImage: CGImageCreateWithMaskingColors(img.CGImage, colorMask)];

[self.toolbar setBackgroundImage:maskedImage forToolbarPosition:UIToolbarPositionAny barMetrics:UIBarMetricsDefault];

score -1 · Answer 8 · answered Dec 26 '17 at 12:18

Swift 3 version of accepted answer:

   self.toolbar.isTranslucent = true
    self.toolbar.setBackgroundImage(UIImage(),
                               forToolbarPosition: UIBarPosition.any,
                               barMetrics: UIBarMetrics.default)

    self.toolbar.setShadowImage(UIImage(), forToolbarPosition: UIBarPosition.any)

How to make UIToolbar have a Clear Background?

8 Answers8

Linked