134

I have my own subclass of UIButton. I add UIImageView on it and add an image. I would like to paint it over the image with a tint color but it doesn't work.

So far I have:

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {

        self.backgroundColor = [UIColor clearColor];
        self.clipsToBounds = YES;

        self.circleView = [[UIView alloc]init];
        self.circleView.backgroundColor = [UIColor whiteColor];
        self.circleView.layer.borderColor = [[Color getGraySeparatorColor]CGColor];
        self.circleView.layer.borderWidth = 1;
        self.circleView.userInteractionEnabled = NO;
        self.circleView.translatesAutoresizingMaskIntoConstraints = NO;
        [self addSubview:self.circleView];

        self.iconView = [[UIImageView alloc]init];
        [self.iconView setContentMode:UIViewContentModeScaleAspectFit];
        UIImage * image = [UIImage imageNamed:@"more"];
        [image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
        self.iconView.image = image;
        self.iconView.translatesAutoresizingMaskIntoConstraints = NO;
        [self.circleView addSubview:self.iconView];
        ...

and on selection :

- (void) setSelected:(BOOL)selected
{
    if (selected) {
        [self.iconView setTintColor:[UIColor redColor]];
        [self.circleView setTintColor:[UIColor redColor]];
    }
    else{
        [self.iconView setTintColor:[UIColor blueColor]];
        [self.circleView setTintColor:[UIColor blueColor]];
    }  
}

What did I do wrong? (The color of the image always stays the same as it was originally.)

4
  • are you able to setTintColor when you are creating the iconView? Commented Mar 4, 2014 at 11:36
  • 1
    do you mean after self.iconView = [UIImageView alloc]...? Yes I can, but it doesn't work. Commented Mar 4, 2014 at 11:46
  • Use CGContext then. May be you can find your answer here stackoverflow.com/a/19275079/1790571 Commented Mar 4, 2014 at 11:49
  • Yes I see this post but I really don't understand why my code doesn't work. Using tint color is much more clean path. Commented Mar 4, 2014 at 11:53

9 Answers 9

253

Instead of this code:

[image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];

you should have:

image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];

Use this in Swift 4.1

image = UIImage(named: "name")!.withRenderingMode(.alwaysTemplate)
6
  • 9
    Not a stupid mistake, but a very important detail. Thanks for posting this. You just saved me lots of time. (corrected typo) Commented Aug 20, 2015 at 18:37
  • 50
    You can select image in assets and select in right panel default rendering mode Commented Oct 22, 2015 at 13:48
  • Excellent! But how do you revert back to the original un-tinted image?
    – Marsman
    Commented Jul 10, 2016 at 20:49
  • If you want to get un-tinted image you could : store tinted one in different variable : UIImage image2 = [image imageWithR....], or you can load image from file again : image = [UIImage imageNamed:@"more"]; Commented Jul 11, 2016 at 4:45
  • I found strange problem with UIImageRenderingModeAlwaysTemplate. If you turn on 'Bold Text' in iOS Setting > Display & Brightness, imageWithRenderingMode: UIImageRenderingModeAlwaysTemplate causes memory leak (image data is never deallocated). It is probably system bug and it may happen also with some other iOS settings. I recommend using "func withTintColor(_ color: UIColor) -> UIImage" added in iOS 13 instead of .tintColor.
    – Slyv
    Commented Jun 1, 2021 at 9:11
104

You can also just set this on your asset. Make sure your image contains all white pixels + transparent. enter image description here

8
  • 6
    I did all of this, but for some reason the tintColor does not work for me. Any idea what else I could try?
    – Banana
    Commented Dec 15, 2016 at 14:37
  • 1
    What kind of image format are you using? And is the image all white + alpha? Commented Dec 24, 2016 at 0:01
  • 4
    Weirdly on my first couple of runs only 2/3 images picked up the tint color. After clean and build all of the images picked up the tint.
    – MathewS
    Commented Jan 18, 2017 at 21:29
  • 13
    @Banana, this is a known issue of the images not using the tint color. I had reported it to Apple a while back and they marked it as a duplicate so they definitely know about it. The workaround is to not set your UIImageView to an image on the Storyboard. So just have a blank UIImageView and then set it in the viewDidLoad (or somewhere else) and you will then see the tintColor on the image. Commented May 3, 2017 at 16:36
  • 1
    @MarkMoeykens More than 4 years later and your solution still works, thank you. Commented Dec 28, 2021 at 6:54
43

(Can't edit @Zhaolong Zhong post)

In swift 3.0, you can do:

let image = UIImage(named: "your_image_name")!.withRenderingMode(.alwaysTemplate)

yourImageView.image = image

yourImageView.tintColor = UIColor.blue
23

Swift version: 5.2

let tintableImage = UIImage(named: "myImage")?.withRenderingMode(.alwaysTemplate)
imageView.image = tintableImage
imageView.tintColor = UIColor.red

Objective C

self.imgView.image = [self.imgView.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
[self.imgView setTintColor:[UIColor darkGrayColor]];

Or

You can also just set this on your asset.

enter image description here

0
19

In swift 2.0+, you can do:

let image = UIImage(named: "your_image_name")!.imageWithRenderingMode(.AlwaysTemplate)

yourImageView.image = image

yourImageView.tintColor = UIColor.blueColor()
8

One step further. This is a drop-in subclass of UIImageView. (Not exact solution for original question.) Use in Interface Builder by setting class name to TintedImageView. Updates in real-time inside the designer as tint color changes.

(Swift 3.1, Xcode 8.3)

import UIKit

@IBDesignable class TintedImageView: UIImageView {
    override func prepareForInterfaceBuilder() {
        self.configure()
    }

    override func awakeFromNib() {
        super.awakeFromNib()

        self.configure()
    }

    @IBInspectable override var tintColor: UIColor! {
        didSet {
            self.configure()
        }
    }

    private func configure() {
        self.image = self.image?.withRenderingMode(UIImageRenderingMode.alwaysTemplate)
    }
}
1
  • 4
    not working, but it modify func configure to : self.image = self.image?.withRenderingMode(UIImageRenderingMode.alwaysTemplate) let color = super.tintColor super.tintColor = UIColor.clear super.tintColor = color
    – lolo_house
    Commented May 4, 2017 at 10:21
5

Make the imageView

    let imageView = UIImageView(frame: frame!)
    imageView.contentMode = .ScaleAspectFit
    imageView.tintColor = tintColor

Make the image

    let mainBundle = NSBundle.mainBundle()
    var image = UIImage(named: filename!, inBundle: mainBundle, compatibleWithTraitCollection: nil)
    image = image?.imageWithRenderingMode(.AlwaysTemplate)

Wire them together

    imageView?.image = image

Display it

view.addSubview(imageView)
1

all said is correct. my contribution If You cannot / dont want to apply to every UiImageView, OR for efficiency You need to render ONCE (or example for cells of tableviews)

func tint(with color: UIColor) -> UIImage {
        var image = withRenderingMode(.alwaysTemplate)
        UIGraphicsBeginImageContextWithOptions(size, false, scale)
        color.set()

        image.draw(in: CGRect(origin: .zero, size: size))
        image = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()
        return image
    }

And set to all UI elements this UIImage.

1

@odemolliens answer should just work.

But if you are still having issues, make sure that the tint color you are applying to the UIImageView is different from the one defined in the Interface Builder.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.