How can I set a button background color on iPhone?

Question

How can I set a custom background color of a button?

Interface Builder doesn\'t seem to have an interface to do this.

Is it only available programmatically

Answer 1

It seems, that button color still is an issue. The following category sets a button's backgroundimage completely programmatically via an instance method that takes a UIColor parameter. There is no need to create button backgroundimage files. It preserves button behavior based on UIControlState. And it keeps the rounded corners.

The header file UIButton+ColoredBackground.h

#import <UIKit/UIKit.h>

@interface UIButton (ColoredBackground)

- (void)setBackgroundImageByColor:(UIColor *)backgroundColor forState:(UIControlState)state;

@end

and the content of UIButton+ColoredBackground.m

#import "UIButton+ColoredBackground.h"
#import <QuartzCore/QuartzCore.h>

@implementation UIButton (ColoredBackground)

- (void)setBackgroundImageByColor:(UIColor *)backgroundColor forState:(UIControlState)state{

    // tcv - temporary colored view
    UIView *tcv = [[UIView alloc] initWithFrame:self.frame];
    [tcv setBackgroundColor:backgroundColor];

    // set up a graphics context of button's size
    CGSize gcSize = tcv.frame.size;
    UIGraphicsBeginImageContext(gcSize);
    // add tcv's layer to context
    [tcv.layer renderInContext:UIGraphicsGetCurrentContext()];
    // create background image now
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    // set image as button's background image for the given state
    [self setBackgroundImage:image forState:state];
    UIGraphicsEndImageContext();

    // ensure rounded button
    self.clipsToBounds = YES;
    self.layer.cornerRadius = 8.0;

    [tcv release];

}

@end

The new method is justed called on every UIButton instance like:

[myButton setBackgroundImageByColor:[UIColor greenColor] forState:UIControlStateNormal];

Answer 2

May be I misunderstood your question, but does below not work for you?

Answer 3

If you are not wanting to use images, and want it to look exactly like the Rounded Rect style, try this. Just place a UIView over the UIButton, with an identical frame and auto resize mask, set the alpha to 0.3, and set the background to a color. Then use the snippet below to clip the rounded edges off the colored overlay view. Also, uncheck the 'User Interaction Enabled' checkbox in IB on the UIView to allow touch events to cascade down to the UIButton underneath.

One side effect is that your text will also be colorized.

#import <QuartzCore/QuartzCore.h>

colorizeOverlayView.layer.cornerRadius = 10.0f;
colorizeOverlayView.layer.masksToBounds = YES;

Answer 4

Set your button type to "custom" in the button attributes palette. This will give you a square button with whatever color you picked for the background.

If you want a button that looks more like a traditional button, but has a different color your going to need to go into some kind of image editing software and create it (I use photoshop for custom buttons).

Answer 5

Here is a free app I created that creates UIGlassButton images. Set the button type to custom. http://itunes.apple.com/us/app/uibutton-builder/id408204223?mt=8

Answer 6

Setting the background color of the view for a rounded-rect button will not change the background color of the button. Try making the button a custom button (the first drop-down in the inspector) and then setting the background color. You will get the desired effect :)