How do I make a UISwitch under iOS 7 not take the background colour of the view behind it?

Question

It looks like this whenever off:

enter image description here

While I'd prefer more of a grey background. Do I really have to use a UIImageView?

score 53 · Accepted Answer · answered Nov 18 '13 at 03:41

53

Here is how I changed the fill color of my iOS7 UISwitch.

First you need to import QuartzCore.

#import <QuartzCore/QuartzCore.h>

Then set the background color and round the UISwitch's corners.

UISwitch *mySwitch = [[UISwitch alloc] initWithFrame:CGRectMake(0.0, 0.0, 51.0, 31.0)];
mySwitch.backgroundColor = [UIColor redColor];
mySwitch.layer.cornerRadius = 16.0; // you must import QuartzCore to do this.
[self addSubview:mySwitch];

This will give you a UISwitch with a custom off (background) color.

Hope this helps someone:)

answered Nov 18 '13 at 03:41

Barry Wyckoff

614
5
10

4

The day they change the shape of the switch your solution will not look fine. – The dude Jun 19 '14 at 08:43
6

The day they will change the shape of the switch I will have to recompile the app with the new SDK and then I'll change it. – Stefano Mondino Jan 29 '15 at 13:15

score 17 · Answer 2 · answered Dec 03 '13 at 12:45

17

You can set the setOnTintColor property of your UISwitch to the color you desire.

answered Dec 03 '13 at 12:45

Antonio R.

407
3
9

This refers to when it's off. – Doug Smith Dec 03 '13 at 12:53
4

For me, this setting refers to when the switch is on. e.g.: [usePatternsSwitch setOnTintColor: [UIColor lightGrayColor]]; – ICL1901 Jan 20 '14 at 18:16
2

Down vote, because this doesn't answer the question at all. The question is referring to the off state. – Alex Jan 27 '16 at 15:21

Stewart Macdonald · Answer 3 · 2015-06-17T06:01:08.487

6

You can also set this for the switch in Interface Builder. Just set the background colour of the UISwitch to whatever colour you want (white, in the example below), then set a User Defined Runtime Attribute of layer.cornerRadius = 16:

enter image description here

edited Jun 17 '15 at 06:01

answered Jun 03 '15 at 09:53

Stewart Macdonald

2,062
24
27

1

Just extra thanks for pointing that properties may be set with User Defined list, not just in code. – Alexo Po. Oct 28 '20 at 11:41

Gabriele Petronella · Answer 4 · 2013-10-04T18:43:33.843

4

There's no API support for changing the off fill color of a UISwitch.

Adjusting the tintColor will only affect the outline, and adjusting the backgroundColor will affect the whole frame, including the parts outside the rounded bounds.

You either have to place a properly shaped opaque UIView behind it or - easier - use a custom open source implementation, such as MBSwitch, which allows you to set the off fill color.

edited Oct 04 '13 at 18:43

answered Oct 04 '13 at 18:22

Gabriele Petronella

106,943
21
217
235

score 3 · Answer 5 · answered Mar 14 '14 at 13:09

3

You can also use an image as background, using the [UIColor colorWithPatternImage];

mySwitch.onTintColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"toggle-bg-on"]];
mySwitch.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"toggle-bg-off"]];

answered Mar 14 '14 at 13:09

Paul van Dijk

130
4

Very useful! Better to add swift version too. – coskukoz Oct 26 '16 at 11:26

score 1 · Answer 6 · answered Jul 16 '14 at 19:49

Adding to Barry Wyckoff solution : set tint color also

UISwitch *mySwitch = [[UISwitch alloc] initWithFrame:CGRectMake(0.0, 0.0, 51.0, 31.0)];
mySwitch.backgroundColor = [UIColor redColor];
mySwitch.layer.cornerRadius = 16.0; // you must import QuartzCore to do this.
mySwitch.tintColor = [UIColor redColor];
[self addSubview:mySwitch];

How do I make a UISwitch under iOS 7 not take the background colour of the view behind it?

6 Answers6

Linked