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.

Solution 1

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

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

Solution 2

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

Solution 3

set toolbarStyle -1 like this

 tools.barStyle = -1; // clear background

Solution 4

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];

Solution 5

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];

View more solutions

Comments

[trojanfoe]

So this is a duplicate question?

[trojanfoe]

Close the question and mark it a duplicate of the one you linked to.

[MikeS]

This is indeed the correct way to do it. It is quite an annoyance though that it cannot be customized without subclassing...

[Miros]

This approach was the only one working when inserting a transparent UIToolbar as a NavigationItem.TitleView.

[Scott Corscadden]

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

[Chris]

On ios7.1, i'm seeing a 1px border (shadow?) at the top of the toolbar.

[Andrew]

@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.

[Chris]

@Andrew - I used setShadowImage:forToolbarPosition: to set the shadow image to [[UIImage alloc] init]

[Vladimir Stazhilov]

Excellent for my case, however not for every one will suit

[Matt]

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 stackoverflow.com/a/8753847/481207).

[Laszlo]

always use prefer firstObject instead of objectAtIndex:0

[Danyal Aytekin]

Thanks @Tuss. In my defence, in iOS 6, firstObject was a private API. ;)

[Vivek]

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

[Alex Black]

Works for me on iOS 11!

[LancDec]

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

[Tj3n]

This works well in light mode but not dark mode, will have to use the recommended (with setShadow too) to completely fix this