Custom uibarbuttonitem image to blend with background

Question

I am making a custom UI for Navigation bar and I have a question exactly as asked in this post

Custom background/transparent background on UIBarButtonItem?

In StoryBoard I tried every sort of combination to make my UIbarbuttonitem tint transparent or clear color but I still see this ugly black button (see then + sign). How can I achieve the effect of transparency so that it looks like my button is blended in with the background?

My screenshot

enter image description here

Some other app screenshot. Look how nice this looks?!

enter image description here

Note here the + image is my own custom png img of 20 x 20 pixels with transparent/blank background.

iska iska · Accepted Answer · 2012-10-26T18:07:48

You can achieve that and more using the new appearance API introduced in iOS 5.

Basically you set the appearance for your UI once and it gets reflected in the whole program.

Here is an example for the UIBarButtonItem:

// You can also use stretchable images
UIImage *image = [[UIImage imageNamed:@"myCoolBarButton.png"]  resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 5)];
[[UIBarButtonItem appearance] setBackgroundImage:image forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];

If you cannot use iOS 5, then you have to build those programmatically like this:

// Create a custom button with an image
UIImage *image = [UIImage imageNamed:@"myCoolBarButton.png"];
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setImage:image forState:UIControlStateNormal];
button.frame = CGRectMake(0.0, 0.0, image.size.width, image.size.height);

// Create a custom UIBarButtonItem with the button
UIBarButtonItem aBarButtonItem = [[UIBarButtonItem alloc] initWithCustomView:aButton];

Anyway, here are a few links with good tutorials on the appearance subject

User Interface Customization in iOS 5

How To Make Your App Stand Out With The New iOS 5 Appearance API

EDIT: Just for clarification, it is much easier to do with custom images than playing around with colors, gradients and transparency.

Custom uibarbuttonitem image to blend with background

3 Answers