Color Tint UIButton Image - ios

Question

I noticed that when I place a white or black UIImage into a UISegmentedControl it automatically color masks it to match the tint of the segmented control. I thought this was really cool, and was wondering if I could do this elsewhere as well. For example, I have a bunch of buttons that have a uniform shape but varied colors. Instead of making a PNG for each button, could I somehow use this color masking to use the same image for all of them but then set a tint color or something to change their actual color?

Answer 1

As of iOS 7, there is a new method on UIImage to specify the rendering mode. Using the rendering mode UIImageRenderingModeAlwaysTemplate will allow the image color to be controlled by the button's tint color.
Objective-C
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
UIImage *image = [[UIImage imageNamed:#"image_name"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
[button setImage:image forState:UIControlStateNormal];
button.tintColor = [UIColor redColor];
Swift
let button = UIButton(type: .custom)
let image = UIImage(named: "image_name")?.withRenderingMode(.alwaysTemplate)
button.setImage(image, for: .normal)
button.tintColor = UIColor.red

Answer 2

As Ric already mentioned in his post you can set the render mode in code, you can also do this directly in the image catalog, see attached image below. Just set the Render As to Template Image
Caveat I have had problems with iOS 7 and this approach. So if you use iOS 7 as well you might want to do it in code as well to be sure, as described here.

Answer 3

Custom Buttons appear in their respective image colors. Setting the button type to "System" in the storyboard (or to UIButtonTypeSystem in code), will render the button's image with the default tint color.
(tested on iOS9, Xcode 7.3)

Answer 4

You must set the image rendering mode to UIImageRenderingModeAlwaysTemplate in order to have the tintColor affect the UIImage. Here is the solution in Swift:
let image = UIImage(named: "image-name")
let button = UIButton()
button.setImage(image?.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate), forState: .Normal)
button.tintColor = UIColor.whiteColor()
SWIFT 4x
button.setImage(image.withRenderingMode(UIImage.RenderingMode.alwaysTemplate), for: .normal)
button.tintColor = UIColor.blue

Answer 5

If you have a custom button with a background image.You can set the tint color of your button and override the image with following .
In assets select the button background you want to set tint color.
In the attribute inspector of the image set the value render as to "Template Image"
Now whenever you setbutton.tintColor = UIColor.red you button will be shown in red.

Answer 6

In Swift you can do that like so:
var exampleImage = UIImage(named: "ExampleImage.png")?.imageWithRenderingMode(.AlwaysTemplate)
Then in your viewDidLoad
exampleButtonOutlet.setImage(exampleImage, forState: UIControlState.Normal)
And to modify the color
exampleButtonOutlet.tintColor = UIColor(red: 1, green: 0, blue: 0, alpha: 1) //your color
EDIT Xcode 8
Now you can also just the rendering mode of the image in your .xcassets to Template Image and then you don't need to specifically declare it in the var exampleImage anymore

Answer 7

Not sure exactly what you want but this category method will mask a UIImage with a specified color so you can have a single image and change its color to whatever you want.
ImageUtils.h
- (UIImage *) maskWithColor:(UIColor *)color;
ImageUtils.m
-(UIImage *) maskWithColor:(UIColor *)color
{
CGImageRef maskImage = self.CGImage;
CGFloat width = self.size.width;
CGFloat height = self.size.height;
CGRect bounds = CGRectMake(0,0,width,height);
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef bitmapContext = CGBitmapContextCreate(NULL, width, height, 8, 0, colorSpace, kCGImageAlphaPremultipliedLast);
CGContextClipToMask(bitmapContext, bounds, maskImage);
CGContextSetFillColorWithColor(bitmapContext, color.CGColor);
CGContextFillRect(bitmapContext, bounds);
CGImageRef cImage = CGBitmapContextCreateImage(bitmapContext);
UIImage *coloredImage = [UIImage imageWithCGImage:cImage];
CGContextRelease(bitmapContext);
CGColorSpaceRelease(colorSpace);
CGImageRelease(cImage);
return coloredImage;
}
Import the ImageUtils category and do something like this...
#import "ImageUtils.h"
...
UIImage *icon = [UIImage imageNamed:ICON_IMAGE];
UIImage *redIcon = [icon maskWithColor:UIColor.redColor];
UIImage *blueIcon = [icon maskWithColor:UIColor.blueColor];

Answer 8

Swift 4 with customType:
let button = UIButton(frame: aRectHere)
let buttonImage = UIImage(named: "imageName")
button.setImage(buttonImage?.withRenderingMode(.alwaysTemplate), for: .normal)
button.tintColor = .white

Answer 9

Swift 3:
This solution could be comfortable if you have already setted your image through xCode interface builder. Basically you have one extension to colorize an image:
extension UIImage {
public func image(withTintColor color: UIColor) -> UIImage{
UIGraphicsBeginImageContextWithOptions(self.size, false, self.scale)
let context: CGContext = UIGraphicsGetCurrentContext()!
context.translateBy(x: 0, y: self.size.height)
context.scaleBy(x: 1.0, y: -1.0)
context.setBlendMode(CGBlendMode.normal)
let rect: CGRect = CGRect(x: 0, y: 0, width: self.size.width, height: self.size.height)
context.clip(to: rect, mask: self.cgImage!)
color.setFill()
context.fill(rect)
let newImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
return newImage
}
}
Then , you can prepare this UIButton extension to colorize the image for a particular state:
extension UIButton {
func imageWith(color:UIColor, for: UIControlState) {
if let imageForState = self.image(for: state) {
self.image(for: .normal)?.withRenderingMode(.alwaysTemplate)
let colorizedImage = imageForState.image(withTintColor: color)
self.setImage(colorizedImage, for: state)
}
}
}
Usage:
myButton.imageWith(.red, for: .normal)
P.S. (working good also in table cells, you don't need to call setNeedDisplay() method, the change of the color is immediate due to the UIImage extension..

Answer 10

For Xamarin.iOS (C#):
UIButton messagesButton = new UIButton(UIButtonType.Custom);
UIImage icon = UIImage.FromBundle("Images/icon.png");
messagesButton.SetImage(icon.ImageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate), UIControlState.Normal);
messagesButton.TintColor = UIColor.White;
messagesButton.Frame = new RectangleF(0, 0, 25, 25);

Answer 11

let button = UIButton(type: .custom)
let image = UIImage(named: "image_name")?.withRenderingMode(.alwaysTemplate)
button.setImage(image, for: .normal)
button.tintColor = UIColor.red
If you are setting UIButton.tintColor by UIColor(r:g:b:alpha:), remember to divide values by 255. Those RGB values should be in between 0 and 1.

Answer 12

If you want to manually mask your image, here is updated code that works with retina screens
- (UIImage *)maskWithColor:(UIColor *)color
{
CGImageRef maskImage = self.CGImage;
CGFloat width = self.size.width * self.scale;
CGFloat height = self.size.height * self.scale;
CGRect bounds = CGRectMake(0,0,width,height);
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef bitmapContext = CGBitmapContextCreate(NULL, width, height, 8, 0, colorSpace, kCGBitmapAlphaInfoMask & kCGImageAlphaPremultipliedLast);
CGContextClipToMask(bitmapContext, bounds, maskImage);
CGContextSetFillColorWithColor(bitmapContext, color.CGColor);
CGContextFillRect(bitmapContext, bounds);
CGImageRef cImage = CGBitmapContextCreateImage(bitmapContext);
UIImage *coloredImage = [UIImage imageWithCGImage:cImage scale:self.scale orientation:self.imageOrientation];
CGContextRelease(bitmapContext);
CGColorSpaceRelease(colorSpace);
CGImageRelease(cImage);
return coloredImage;
}

Answer 13

You Should Try
After Setting The Frame
NSArray *arr10 =[NSArray arrayWithObjects:btn1,btn2,nil];
for(UIButton *btn10 in arr10)
{
CAGradientLayer *btnGradient2 = [CAGradientLayer layer];
btnGradient2.frame = btn10.bounds;
btnGradient2.colors = [NSArray arrayWithObjects:
(id)[[UIColor colorWithRed:151.0/255.0f green:206.0/255.5 blue:99.0/255.0 alpha:1] CGColor],
(id)[[UIColor colorWithRed:126.0/255.0f green:192.0/255.5 blue:65.0/255.0 alpha:1]CGColor],
nil];
[btn10.layer insertSublayer:btnGradient2 atIndex:0];
}

Answer 14

Swift 3.0
let image = UIImage(named:"NoConnection")!
warningButton = UIButton(type: .system)
warningButton.setImage(image, for: .normal)
warningButton.tintColor = UIColor.lightText
warningButton.frame = CGRect(origin: CGPoint(x:-100,y:0), size: CGSize(width: 59, height: 56))
self.addSubview(warningButton)

Answer 15

If you're arriving here after iOS 15 and you're using the new UIButton.Configuration APIs, then you might need to do it via the imageColorTransformer.
Looks like this:
configuration.imageColorTransformer = UIConfigurationColorTransformer { _ in .green }
For convenience, you can create an extension:
extension UIButton.Configuration {
func imageColor(_ color: UIColor) -> UIButton.Configuration {
var configuration = self
configuration.imageColorTransformer = UIConfigurationColorTransformer { _ in color }
return configuration
}
}
// Usage:
configuration = configuration.imageColor(.green)
As with the other answers, the image itself has to be "Render As - Template Image" in the Xcode Assets, or in code image.withRenderingMode(.alwaysTemplate)
BONUS TIP:
What if you want the image color to change when the button is highlighted? Then your configuration extension can look like this:
func imageColor(whenNormal: UIColor,
whenHighlighted: UIColor,
isHighlighted: Bool) -> UIButton.Configuration {
var configuration = self
configuration.imageColorTransformer = UIConfigurationColorTransformer { _ in
isHighlighted ? whenHighlighted : whenNormal
}
return configuration
}
And this itself has to be called from a configurationUpdateHandler context, like this:
someButton.configurationUpdateHandler = { button in
guard var configuration = button.configuration else { return }
configuration.image = UIImage(named: "some_image")
configuration = configuration.imageColor(whenNormal: .green,
whenHighlighted: .green.withAlphaComponent(0.7),
isHighlighted: button.isHighlighted)
button.configuration = configuration
}
Note that the configurationUpdateHandler is also where you can actually define a different image based on button state(s).

Answer 16

Change button image or image view tint color Swift :
btn.imageView?.image = btn.imageView?.image?.withRenderingMode(.alwaysTemplate)
btn.imageView?.tintColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)

Answer 17

To set white colour of the image(arrow icon) on the button, we're using:
let imageOnButton = UIImage(named: "navForwardArrow")?.imageWithColor(color: UIColor.white)
button.setImage(imageOnButton, for: .normal)
Known issue: The icon looses its white colour while the button is pressed.
Screenshot:

Answer 18

None of above worked for me, because tint was cleared after click. I had to use
button.setImageTintColor(Palette.darkGray(), for: UIControlState())

Answer 19

I had a problem with masking image in highlighted state. I didn't want it to happen. If You have the same problem, check this out: adjustsImageWhenHighlighted = false

Answer 20

Change button image or image view tint color Swift :
let image = UIImage(named: "map")
mapButton.setImage(image!.withRenderingMode(UIImage.RenderingMode.alwaysTemplate), for: .normal)
mapButton.tintColor = UIColor.black