Create a Button with Background Color for Normal/Pressed and Active State

Question

I am new to iOS development and want to create a button which will change the background color based on the following state

Normal - #00aa6e
Pressed - #009762
Active - #009762

Can i do this without using any image? I have 8 types of button in my application and that would lead to increase in asset size for using so many images.

Wilson L · Answer 1 · 2014-08-01T09:06:04.387

- (void)viewDidLoad
{
    [super viewDidLoad];
    UIColor * color1 = (UIColor *)UIColorFromRGB(0xFF00FF)
    ...// set up ur background color here

    [button setBackgroundImage:[self imageWithColor:color1] forState:UIControlStateNormal];
    [button setBackgroundImage:[self imageWithColor:color2] forState:UIControlStateHighlighted];
    [button setBackgroundImage:[self imageWithColor:color3] forState:UIControlStateSelected];
    [button addTarget:self action:selector(btnSelected:) forControlEvents:UIControlEventTouchUpInside];   
}

 + (UIImage *)imageWithColor:(UIColor *)color
{
    CGRect rect = CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);
    UIGraphicsBeginImageContext(rect.size);
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetFillColorWithColor(context, [color CGColor]);
    CGContextFillRect(context, rect);

    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return image;
}

- (IBAction)btnSelected:(id)sender {
    [sender setSelected:YES];
}

setBackgroundImage will resize ur background image according to ur button's size, u don nid to resize images for button

score 1 · Answer 2 · edited May 23 '17 at 10:26

I am sure you can. An answer you can find here:

UIButton *loginButton = [UIButton buttonWithType:UIButtonTypeCustom];
[loginButton setBackgroundColor:[UIColor blueColor]];
[loginButton addTarget:self action:@selector(buttonHighlight:) forControlEvents:UIControlEventTouchDown];
[loginButton addTarget:self action:@selector(buttonNormal:) forControlEvents:UIControlEventTouchUpInside];

}

- (void)buttonHighlight:(UIButton *)sender {
    sender.backgroundColor = (UIColor *)UIColorFromRGB(0xFF00FF);
}

- (void)buttonNormal:(UIButton *)sender {
    sender.backgroundColor = UIColorFromRGB(0x00FFFF);
}

Apple doesn't support 0xRRGGBB recording method. If you want to use your colors as hex you can use HexColors library or use solution from this answer:

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

All you need now to combine this two solutions.. And one more thing: If you don't want to avoid big images as background color you can use a pattern:

UIColor *col = [UIColor colorWithPatternImage:<#(UIImage *)#>];

or linear gradient:

iPhone iOS how to add linear gradient to a UIButton under the button's text or image?

this changes the Title color. i want to change the background color. — Harsha M V, Aug 01 '14 at 07:55
Okey i modified my answer to work with background. Take a look. — Szu, Aug 01 '14 at 08:17

score 1 · Answer 3 · answered Aug 01 '14 at 09:05

Try this

 -(void)viewDidLoad
 {
 [super viewDidLoad];

 UIButton *myButton = [[UIButton alloc]initWithFrame:CGRectMake(20,50 , 50, 50)];
 [myButton setBackgroundColor: [UIColor greenColor]];
 [myButton addTarget:self action:@selector(pressed:) forControlEvents:UIControlEventTouchDown];
 [self.view addSubview:myButton];
 [myButton addTarget:self action:@selector(selected:) forControlEvents: (UIControlEventTouchUpInside)];
 }

 -(void)didReceiveMemoryWarning
 {
 [super didReceiveMemoryWarning];
 // Dispose of any resources that can be recreated.
 }
 -(IBAction)pressed:(id)sender{
  UIButton *myButton = (UIButton*)sender;
 [myButton setBackgroundColor:[UIColor blueColor]];

 }
  -(IBAction)selected:(id)sender{
 UIButton *myButton = (UIButton*)sender;
 [myButton setBackgroundColor:[UIColor redColor]];
 }

Here

Green - normal, Blue - Pressed, Red - selected.

Hope this helps

score 0 · Answer 4 · answered Nov 05 '14 at 08:26

@Wilson L answer worked perfectly.

For those who code using Swift, here is the code:

func imageFromColor(color:UIColor) -> UIImage{
    var rect:CGRect  = CGRectMake(0, 0, 1, 1);
    UIGraphicsBeginImageContext(rect.size);
    var context:CGContextRef  = UIGraphicsGetCurrentContext();

    CGContextSetFillColorWithColor(context, color.CGColor );
    CGContextFillRect(context, rect);

    var image:UIImage  = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return image;
}

    backButton.setBackgroundImage(imageFromColor(UIColor(red: 8/255, green: 75/255.0, blue: 122/255.0, alpha: 1.0)), forState: .Normal)
    backButton.setBackgroundImage(imageFromColor(UIColor(red: 255/255, green: 60/255.0, blue: 93.0/255.0, alpha: 1.0)), forState: .Selected)

Create a Button with Background Color for Normal/Pressed and Active State

4 Answers4