Couldn't UIToolBar be transparent?

Question

I try the following code, but it doesn't work.

[helloToolbar setBackgroundColor:[UIColor clearColor]];

Discomfit

possible duplicate of How to draw a transparent UIToolbar or UINavigationBar in iOS7 – Ayesha

Answer 1

The best you can do is using

[helloToolbar setBarStyle:UIBarStyleBlack];
[helloToolbar setTranslucent:YES];

This will get you a black but translucent toolbar.

Lythraceous

Take a look at the solution below for a fully transparent (not translucent) toolbar. – Isisiskenderun

I added an answer that works on iOS 5.1 - you subclass UIToolbar and interrogate the subviews during layoutSubviews. – Selia

Answer 2

To make a completely transparent toolbar, use the method described here. In a nutshell, create a new TransparentToolbar class that inherits from UIToolbar, and use that in place of UIToolbar.

TransarentToolbar.h

@interface TransparentToolbar : UIToolbar
@end

TransarentToolbar.m

@implementation TransparentToolbar

// Override draw rect to avoid
// background coloring
- (void)drawRect:(CGRect)rect {
    // do nothing in here
}

// Set properties to make background
// translucent.
- (void) applyTranslucentBackground
{
    self.backgroundColor = [UIColor clearColor];
    self.opaque = NO;
    self.translucent = YES;
}

// Override init.
- (id) init
{
    self = [super init];
    [self applyTranslucentBackground];
    return self;
}

// Override initWithFrame.
- (id) initWithFrame:(CGRect) frame
{
    self = [super initWithFrame:frame];
    [self applyTranslucentBackground];
    return self;
}

@end

(code from the blog post linked above)

Isisiskenderun

thanks! I did it, but now for some reason the toolbar is black not transparent... – Paperback

This works well, and I am using it as an 'easy' way to put multiple buttons in the left-side and/or right-side of a navigation bar (with another button that has the toolbar as the custom view). One additional thing that is needed in this scenario, however, is to also set tintColor to clearColor in the applyTranslucentBackground method. – Hadleigh

I think it stopped working on iOS 5. But on iOS 5 you have "correct" ways to make it transparent. – Isisiskenderun

The iOS5.1 correct ways did not work for me so I implemented this as is and it worked as a charm. Maybe later when I get some time I will see where I went wrong and get it done the new iOS5 way. – Microscope

My UIBarButton items that should be white are very dim with this toolbar code – Jenevajeni

Use in combination with this StackOverflow question and make buttons float over the keyboard! – Androgynous

I tried all the other for iOS7, and this one is the only one to work. (the others have the issue of the top black border) – Azelea

This did it for me, but kinda nasty that developers have to do it this way, IMHO. – Francophile

Answer 3

In iOS 5, simply call setBackgroundImage and pass a transparent image.

Here's how I do it (I dynamically generate transparent image):

CGRect rect = CGRectMake(0, 0, 1, 1);
UIGraphicsBeginImageContext(rect.size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [[UIColor clearColor] CGColor]);
CGContextFillRect(context, rect);
UIImage *transparentImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

[toolbar setBackgroundImage:transparentImage forToolbarPosition:UIToolbarPositionAny barMetrics:UIBarMetricsDefault];

Rationality

is there any alternative to provide same thing in iOS 4? – Deedee

You can just pass it a newly allocated UIImage: [toolbar setBackgroundImage:[UIImage alloc] forToolbarPosition:UIToolbarPositionAny barMetrics:UIBarMetricsDefault]; – Isidraisidro

Answer 4

Transparent (iOS 5.0):

[toolbar setBackgroundImage:[[UIImage alloc] init] forToolbarPosition:UIToolbarPositionAny barMetrics:UIBarMetricsDefault];

Translucent:

[toolbar setBarStyle:UIBarStyleBlack];
[toolbar setTranslucent:YES];

Nausea

this worked for me. Swift: self.setBackgroundImage(UIImage(), forToolbarPosition: .any, barMetrics: .default) – Dyeline

Answer 5

A cumulative solution for all devices, from oldest iOS 3.0 (iPhone 1) to newest iOS 6.1 (iPad mini).

@implementation UIToolbar (Extension)

- (void)drawRect:(CGRect)rect
{
    if (CGColorGetAlpha(self.backgroundColor.CGColor) > 0.f)
    {
        [super drawRect:rect];
    }
}

- (void)setTransparent
{
    //iOS3+
    self.backgroundColor = [UIColor clearColor];

    //iOS5+
    if ([self respondsToSelector:@selector(setBackgroundImage:forToolbarPosition:barMetrics:)])
    {
        [self setBackgroundImage:[[UIImage new] autorelease] forToolbarPosition:UIToolbarPositionAny barMetrics:UIBarMetricsDefault];
    }
    //iOS6+
    if ([self respondsToSelector:@selector(setShadowImage:forToolbarPosition:)])
    {
        [self setShadowImage:[[UIImage new] autorelease] forToolbarPosition:UIToolbarPositionAny];
    }
}

@end

When you want a transparent toolbar, call setTransparent on it. When you want a non-transparent toolbar, set a backgroundColor of your choice or add an imageView by yourself.

Macymad

Answer 6

Another solution would be to define a category for UIToolbar:

@implementation UIToolbar(Transparent) 
-(void)drawRect:(CGRect)rect {
    // do nothing in here
}
@end

In the IB set the toolbar as Black Translucent and non opaque.

Garda

Note that this would make all toolbars in your app transparent. – Peregrinate

Answer 7

We've just noticed that overriding drawRect doesn't work anymore with iOS 4.3. It's not called anymore (edit: seems to be only in Simulator). Instead drawLayer:inContext: is called.

A great solution was posted here

Now you can set each UIToolbar object transparent, by setting its tintColor to [UIColor clearColor] :)

Trapezohedron

Answer 8

With iOS 5 the following works:

UIToolbar *bar = [[UIToolbar alloc] initWithFrame:CGRectZero];
if (bar.subviews.count > 0)
     [[[bar subviews] objectAtIndex:0] removeFromSuperview];

This is because the background is now a subview. This code is safe even with new iterations of iOS, but it may stop working. This is not private API usage, your app is safe to submit to the store.

Make sure you remove the backgroundView before adding any UIBarButtonItems to the bar. Or my code will not work.

Belindabelisarius

Answer 9

I just tested the following with iOS 4.3 on simulator and phone, seems to work fine. Subclass UIToolbar, provide one method:

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

Sartorius

Answer 10

toolbar.barStyle = UIBarStyleBlackTranslucent;

Warwick

Answer 11

This works in iOS5.1 with pretty minimal effort. I am matching up the size, as only the background will have the same frame size as the toolbar itself. You could use other criteria, of course.

Enjoy.

Create a subclass of UIToolbar as follows:

.h:

#import <UIKit/UIKit.h>

@interface UIClearToolbar : UIToolbar

@end

.m:

#import "UIClearToolbar.h"

@implementation UIClearToolbar

- (void)layoutSubviews {
    // super has already laid out the subviews before this call is made.
    [self.subviews enumerateObjectsUsingBlock:^(UIView* obj, NSUInteger idx, BOOL *stop) {
        if (CGSizeEqualToSize(self.frame.size, obj.frame.size) ||
        self.frame.size.width <= obj.frame.size.width) {  // on device, the background is BIGGER than the toolbar.) {
            [obj removeFromSuperview];
            *stop = YES;
        }
    }];
}

@end

Selia

Answer 12

Thanks @morais for your solution - here's the code translated to MonoTouch:

  public class TransparentToolbar : UIToolbar
  {
    public TransparentToolbar()
    {
      init();
    }

    public TransparentToolbar(RectangleF frame) : base(frame)
    {
      init();
    }

    void init()
    {
      BackgroundColor=UIColor.Clear;
      Opaque=false;
      Translucent=true;
    }

    public override void Draw(RectangleF rect)
    {
    }
  }

Jacki