How to make UIToolbar have a Clear Background?

G

8

16

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.

Gearwheel answered 21/8, 2012 at 15:24 Comment(3)

possible duplicate of Transparent UIToolbar – Bernhard 21/8, 2012 at 15:48

https://mcmap.net/q/747204/-transparent-uitoolbar – Branks 21/8, 2012 at 16:7

Hey guys, sorry about the duplicate. I didn't notice the other one. Please close the question and mark as duplicate. – Gearwheel 21/8, 2012 at 16:49

S

65

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

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

Scalf answered 16/4, 2013 at 11:24 Comment(6)

This approach was the only one working when inserting a transparent UIToolbar as a NavigationItem.TitleView. – Alejoa 16/7, 2013 at 12:53

On ios7.1, i'm seeing a 1px border (shadow?) at the top of the toolbar. – Blintz 18/3, 2014 at 5: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. – Kolnos 19/3, 2014 at 16:25

@Kolnos - I used setShadowImage:forToolbarPosition: to set the shadow image to [[UIImage alloc] init] – Blintz 20/3, 2014 at 22:4

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 https://mcmap.net/q/176481/-visually-modifying-a-uitoolbar-from-xcode-storyboard). – Hindquarter 9/12, 2014 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) – Nathannathanael 26/12, 2017 at 12:16

R

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

Rame answered 21/8, 2012 at 15:29 Comment(5)

So this is a duplicate question? – Bernhard 21/8, 2012 at 15:48

Close the question and mark it a duplicate of the one you linked to. – Bernhard 21/8, 2012 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... – Toiletry 21/8, 2012 at 17:0

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 – Boyla 13/11, 2013 at 16:56

Excellent for my case, however not for every one will suit – Playlet 2/12, 2014 at 15:23

V

5

set toolbarStyle -1 like this

 tools.barStyle = -1; // clear background

Vivianne answered 10/7, 2013 at 13:38 Comment(4)

Works for me on iOS 11! – Notus 4/6, 2019 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 – Dwinnell 10/3, 2022 at 19:4

This works well in light mode but not dark mode, will have to use the recommended (with setShadow too) to completely fix this – Blunt 2/6, 2022 at 6:58

Xcode 15 beta 5 -> Cannot assign value of type 'Int' to type 'UIBarStyle', can't seem to hack my way around it... – Sulfurous 21/8, 2023 at 19:24

S

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

Street answered 14/11, 2013 at 14:53 Comment(2)

always use prefer firstObject instead of objectAtIndex:0 – Minier 27/9, 2016 at 11:49

Thanks @Tuss. In my defence, in iOS 6, firstObject was a private API. ;) – Street 29/9, 2016 at 17:41

N

2

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)

Nicki answered 5/6, 2020 at 13:7 Comment(0)

J

1

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

Jurat answered 21/4, 2014 at 1:2 Comment(0)

A

0

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

Aretina answered 13/12, 2012 at 5:54 Comment(0)

N

-1

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)

Nathannathanael answered 26/12, 2017 at 12:18 Comment(0)

Recommended topics

Hot tags