Setting UIButton image results in blue button in iOS 7

Question

On iOS 6 SDK I wrote the following lines of code to display an image inside a button:

NSURL *thumbURL2 = [NSURL URLWithString:@"http://example.com/thumbs/2.jpg"];
NSData *thumbData2 = [NSData dataWithContentsOfURL:thumbURL2];
UIImage *thumb2 = [UIImage imageWithData:thumbData2];
[btn2 setImage:thumb2 forState:UIControlStateNormal];
[self.view addSubview:btn2];

But now with Xcode 5 and iOS 7 this doesn't work. The button doesn't contain the image. The button is filled with blue color.

Does the image show up when you click the button? – JustAnotherCoder Aug 08 '13 at 21:33 — JustAnotherCoder, Aug 08 '13 at 21:33

score 388 · Answer 1 · edited Nov 12 '13 at 21:23

388

In iOS7 there is new button type called UIButtonTypeSystem NS_ENUM_AVAILABLE_IOS(7_0), // standard system button

Check your .xib file and change button type to Custom Look at the image

To do this programmatically, add this line to the viewDidLoad:

[UIButton buttonWithType:UIButtonTypeSystem];

edited Nov 12 '13 at 21:23

Kyle Greenlaw

737
1
8
20

answered Aug 12 '13 at 12:30

Chamira Fernando

6,836
3
23
23

2

[UIButton buttonWithType:UIButtonTypeSystem]; – avuthless Oct 14 '13 at 13:02
60

Note that this solution does remove the system tint color, but also results in a hard transition between the highlighted and normal states. If you're looking to preserve the system behavior, animations, etc., but want to get rid of the tint color, try `[myUIButton setImage: [[UIImage imageNamed: @"myButtonImage"] imageWithRenderingMode: UIImageRenderingModeAlwaysOriginal] forState: UIControlStateNormal];` (with the button type set to "System" in IB). – JWK Dec 18 '13 at 22:52
Thanks this was very helpful. In our case, the button was even clipping to the shape of the transparent PNG and then tinting. – g_pass May 22 '14 at 00:16
Geezm they hid that one well didn't they?! – Maury Markowitz Sep 04 '14 at 22:03
it works :) u might have some other problem in ur code. If you look at Xcode 6.1 you can clearly see the available options.. – Chamira Fernando Oct 22 '14 at 10:34
@ChamiraFernando I know it's more than two years on, but could you check the approved edit at the end of your answer - shouldn't it be `UIButtonTypeCustom`? Edit should really have been rejected anyway, even if it had been correct, as it should have been posted as a comment instead. – CupawnTae Dec 20 '15 at 17:55
(not to mention the fact that just adding the line in question won't do anything useful at all) – CupawnTae Dec 20 '15 at 18:08
in swift : UIButton(type: UIButtonType.Custom), thank you! – Chris Ho Apr 13 '16 at 02:57

score 54 · Answer 2 · answered Jan 23 '14 at 16:03

54

It seems iOS 7 is using the image provided just as an Alpha mask for displaying the button's tint color. Changing the button type to UIButtonTypeCustom did the trick for me (thanks user716216!). Setting the image as background doesn't always work if you already have a background image, as was my case.

answered Jan 23 '14 at 16:03

user3099609

2,318
18
20

Thank you! Original user forgot to accept it as the answer. – jigzat Mar 25 '14 at 18:52
it's working for me , but change to system not work for my case , thanks all of your contribution – chings228 Apr 04 '14 at 11:24

score 41 · Answer 3 · edited Jul 02 '20 at 08:18

41

Swift 3, 4, 5 :

let image = UIImage(named: "my-image")
myButton.setImage(image.withRenderingMode(.alwaysOriginal), for: .normal)

edited Jul 02 '20 at 08:18

Ben

3,346
6
32
51

answered Feb 28 '17 at 14:42

Wilson

9,006
3
42
46

score 24 · Answer 4 · answered Aug 08 '13 at 18:44

24

There's a good chance that the image is there and you just can't see it. Try changing the button's type to UIButtonTypeCustom. If that doesn't work, set the button's background color to [UIColor clearColor];

answered Aug 08 '13 at 18:44

Mick MacCallum

129,200
40
280
281

score 11 · Answer 5 · answered Nov 11 '14 at 13:49

11

For swift:

    let aButton = UIButton.buttonWithType(UIButtonType.Custom) as UIButton

answered Nov 11 '14 at 13:49

Esqarrouth

38,543
21
161
168

score 9 · Answer 6 · answered Nov 21 '13 at 16:33

The issue is the TintColor. By default, iOS throws a blue tint color over every button. You can get around it through 3 ways.

Change the tint color. [button setTintColor:[UIColor blackColor]]; This may color your image in ways you don't want it to.
As most other suggested, set the background image. [button setBackgroundImage:[UIImage...]];
Add an UIImageView to your button.

UIImageView * img = [[UIImageView alloc] initWithImage:[UIImage...]];

[button addSubView:img];

score 6 · Answer 7 · answered Sep 23 '13 at 07:56

I had the same issue. On my storyboard I had a button without any image.

I would then assign the image in the code.

IOS 7 came and I got a lot of blue images.

The resolution was simple yet confusing. If I assign any image on the storyboard and then change the image at run time it works fine.

You always must specify a starting image on the storyboard even if you are not going to use it.

score 3 · Answer 8 · edited Dec 09 '13 at 22:26

3

This worked for me

[myButton1 setBackgroundImage:[UIImage imageNamed:@"phones.png"] forState:UIControlStateNormal];

Note:Remove front image before doing this.

edited Dec 09 '13 at 22:26

Josh Crozier

233,099
56
391
304

answered Dec 09 '13 at 12:41

datha

359
2
14

how to remove background image please!! – simbesi.com Jul 10 '14 at 06:16

score 3 · Answer 9 · answered Jan 05 '18 at 20:45

3

Old thread, but I wanted to chime in because I just had the same problem. The issue was just that you are calling setImage when you should call setBackgroundImage.

answered Jan 05 '18 at 20:45

Rob Schlackman

309
3
6

score 2 · Answer 10 · answered Nov 01 '19 at 15:51

2

In iOS 13 -- just set the Tint property to White, while keeping the type of the UIButton as Custom

answered Nov 01 '19 at 15:51

rommex

763
1
8
21

score 1 · Answer 11 · answered Oct 14 '13 at 15:27

None of the given solutions were working for me. If you do not set an initial image in Storyboard, you can still change the image of the button by using setBackgroundImage.

For your example, only a minor change is needed.

NSURL *thumbURL2 = [NSURL URLWithString:@"http://example.com/thumbs/2.jpg"];
NSData *thumbData2 = [NSData dataWithContentsOfURL:thumbURL2];
UIImage *thumb2 = [UIImage imageWithData:thumbData2];
[btn2 setBackgroundImage:thumb2 forState:UIControlStateNormal];
[self.view addSubview:btn2];

score 1 · Answer 12 · answered Sep 05 '14 at 10:43

This Problem is called blue color problem of the button in xcode. When we make button by code the button shows the blue tint color by default.This can be solved byt assigning tint color to black or white accordingly to your cell's color. The code is :

UIImage *closebtnimg = [UIImage imageNamed:@"icon_uncheck.png"];
 UIImage *closebtnimg1 = [UIImage imageNamed:@"icon_checked.png"];

Custombutton *button = [Custombutton buttonWithType:UIButtonTypeRoundedRect];
[button setFrame:CGRectMake(52, 66, 25, 24)];
[button setBackgroundImage:closebtnimg forState:UIControlStateNormal];
[button setBackgroundImage:closebtnimg1 forState:UIControlStateSelected];
[button setTintColor:[UIColor whiteColor]];
[cell.contentView addSubview:button];
[button addTarget:self action:@selector(changeImage:)  forControlEvents:UIControlEventTouchUpInside];

its pretty helpful @Shane – Rameshwar Gupta Sep 05 '14 at 10:44 — Rameshwar Gupta, Sep 05 '14 at 10:44

OhadM · Answer 13 · 2018-01-08T18:14:38.893

Using Xcode 9.2 none of the above solutions worked for what I was looking for.

I was looking for a solution that will let me set .normal and .selected UIControlState images inside the storyboard for their original rendering mode, but, inside the Swift file, no string literals should exist regarding the image names.

Basically, inside your code you will get the image you set inside your storyboard for .normal state and re-render it as .alwaysOriginal (Same for .selected state), then, you will set that image (which is now rendered as original and won't be affected by the tint) for the relevant state (.normal and .selected) of your UIButton.

Here it is:

// Get your .normal image (you set via your storyboard) and render it as original
let unselectedImage = yourButton.image(for: .normal)?.withRenderingMode(.alwaysOriginal)
// Set your normal image but this time rendered as original
yourButton.setImage(unselectedImage, for: .normal)
// Same for selected state
let selectedImage = yourButton.image(for: .selected)?.withRenderingMode(.alwaysOriginal)
yourButton.setImage(selectedImage, for: .selected)

This way you can set your button image states and if the image name will change, it won't affect your code.

score 0 · Answer 14 · answered Oct 23 '15 at 07:19

0

making the tint color as clearcolor for all the four states(Default,Highlighted,selected,disabled) worked for me.

answered Oct 23 '15 at 07:19

Rajashekar

619
9
30

score -1 · Answer 15 · answered Dec 18 '18 at 08:17

-1

In Swift 4, initialize your UIButton and assign uyour image Data as follows:

let myButton = UIButton(type: .cutsom)
myButton.setImage(UIImage(data:myImageData), for: .normal)

answered Dec 18 '18 at 08:17

Frank Eno

2,581
2
31
54

Setting UIButton image results in blue button in iOS 7

15 Answers15

Swift 3, 4, 5 :

Linked

Related