tintedImageProvider does not provide tint color in Graphic Complication

I am trying to create Graphic Complications for my Apple Watch app (namely Graphic Circular) and I've run into some problems. To support both multicolor and tinted watch faces, I use the following code to provide image for my complication:

    let graphicCircularTemplate = CLKComplicationTemplateGraphicCircularImage()
    if let tintedImage = UIImage(named: "GraphicCircular"), let fullColorImage = UIImage(named: "GraphicCircularOrange") {
        let tintedImageProvider = CLKImageProvider(onePieceImage: tintedImage)
        var imageProvider = CLKFullColorImageProvider()
        if #available(watchOSApplicationExtension 6.0, *) {
            imageProvider = CLKFullColorImageProvider(fullColorImage: fullColorImage, tintedImageProvider: tintedImageProvider)
        } else {
            imageProvider = CLKFullColorImageProvider(fullColorImage: fullColorImage)
        }
        graphicCircularTemplate.imageProvider = imageProvider
    }

Now my fullColorImage is following: fullColorImage

Whereas the tinted image of same size is rendered as Template image: tintedImage

In multicolor Infograph watch face the full color image looks as expected: multicolor

But when I change watch face to a selected tint, my tinted image renders as pure white, and the system tint color does not get applied to it: tint color

So my question is what am I missing and why does my tintedImageProvider not provide any tint?

Besides, I've noticed that system complications of type Graphic Circular seem to have a slightly grey background which sets them apart in dark watch face environment. I have hardcoded same background color into full color image, but when face switches to tint mode - my complication's background goes completely black. Any ideas on how to achieve this grey background effect?

Well, solution came after reiterating through documentation several times - decided to post an answer in case someone else finds this solution as non-obvious as I did:

In Graphic complications that support multicolor watch faces with full-color complication images system tint is only applied to twoPieceImageForeground parameter of tintedImageProvider. Simply providing a template onePieceImage doesn't do the trick.

Creating a two piece image also resolves the second part of my question regarding grey background for image in Graphic Circular complication. To solve this, I've created a plain rectangle image of required complication size, set its background color to black and alpha to 11%. Passing this image as twoPieceImageBackground parameter to tintedImageProvider creates the needed grey-background effect upon desaturation.

Recommended topics

Hot tags