Tint UIButton and UIBarButtonItem

Edit 2011-11-04

Since iOS 5.0, UIButton and UIBarButtonItem have a tintColor property.

 

You may have noticed that the tint property is not available for UIButton and UIBarButtonItem.

Two common techniques to change the color, you can find around are drawing button with CoreGraphic or using a stretchable UIImage.

Lately, I found a new technique based on UISegmentedControl which you can use the tint property to change the color of your button. This control can be tweaked to have only one segment with a UIButton style (UISegmentedControlStyleBar).

A standard UISegmentedControl

Tweaking the control

We will now create a UISegmentedControl with one segment and set its tint color:

UISegmentedControl *button = [[[UISegmentedControl alloc] initWithItems:[NSArray arrayWithObjects:@"Add", nil]] autorelease];
button.frame = CGRectMake(0, 0, 160, 33);
button.center = self.view.center;
button.momentary = YES;
button.segmentedControlStyle = UISegmentedControlStyleBar;
button.tintColor = UIColorFromRGB(0x0000DD);
[self.view addSubview:button];

Compile your code, your button will look like the following screenshot:

Refer to the UISegmentedControl class reference for a detailled explanation of its properties.

I used a macro in this code to define my tint color. Macro definition is:

#define UIColorFromRGB(rgbValue) [UIColor \
  colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 \
  green:((float)((rgbValue & 0xFF00) >> 8))/255.0 \
  blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]

You can read more about defining macro or function here and here.

In a toolbar

You can also use this technique to tint UIBarButtonItem used in UIToolBar.

UIToolbar *toolbar = [[[UIToolbar alloc] init] autorelease];
toolbar.barStyle = UIBarStyleDefault;
[toolbar sizeToFit];
toolbar.frame = CGRectMake(0, self.view.frame.size.height-44, self.view.frame.size.width, 44);
[self.view addSubview:toolbar];

/* Create our tinted buttons */
UISegmentedControl *button = [[[UISegmentedControl alloc] initWithItems:[NSArray arrayWithObjects:@"Add", nil]] autorelease];
button.momentary = YES;
button.segmentedControlStyle = UISegmentedControlStyleBar;
button.tintColor = UIColorFromRGB(0x0d9c23);

UIBarButtonItem *barButton = [[[UIBarButtonItem alloc] initWithCustomView:button] autorelease];
UISegmentedControl *button2 = [[[UISegmentedControl alloc] initWithItems:[NSArray arrayWithObjects:@"Delete", nil]] autorelease];
button2.momentary = YES;
button2.segmentedControlStyle = UISegmentedControlStyleBar;
button2.tintColor = UIColorFromRGB(0xC84131);
UIBarButtonItem *barButton2 = [[[UIBarButtonItem alloc] initWithCustomView:button2] autorelease];

[toolbar setItems:[NSArray arrayWithObjects: barButton, barButton2, nil]];

You now have a toolbar with 2 tinted buttons that look like that:

Download on GitHub.com

This source code is created and enhanced in my leisure time for free. Your donation allows me to continue my development and any amount is greatly appreciated.
 
  • Chris Milne

    Awesome work around, thanks for the heads up!

  • CharlyBr

    You’re welcome!

  • Pingback: How to change the color of a UIBarButtonItem | farp.blog()

  • This is really awesome. I’ve been looking for a solution to this and was unhappy with having to use an image.

    I took your code a little bit further and put it into a UIBarButtonItem category. Check it out http://fredandrandall.com/blog/2011/03/31/how-to-change-the-color-of-a-uibarbuttonitem/

  • Now you can tint the UIBarButtonItems on a tool bar in the IB file. There is a Tint drop down in the attribute inspector window tab.

  • Heinrich Schulze

    Für die deutsche Communtiy empfehle ich bezüglich des UIButtons dieses Tutorial:

    http://bedifferently.wordpress.com/2012/01/04/uibutton-konfiguriere-die-prasentation-des-buttons/

  • Christian

    I was wondering how you make the buttons work. I’ve tried setting the selector on the segment and the UIBarButton, and nothing seems to work. Anyone got that working? 🙂

  • Great article, still usefull if you need to support iOS 4.3.
    If you want to display an image / icon you can just init the UISegmentControll with one empty NSString (@””) and then use [button setImage:[UIImage imageNamed:@”icon.png”] forState:UIControlStateNormal]; to set the image.
    When setting the action for the button remember to use forControlEvents:UIControlEventValueChanged!

  • pete

    great article.
    When I press the button, it’s stays pressed only for ~half a second. How can I make it behave more like a regular button?