WatchKit: How to Place Text Over An (Animating) Image

It is becoming common to see WatchKit UI that includes a chart-like animating image with text overlaid on top of it. Apple’s Activity app is a great example:


Yet, today when I tried to create this type of interface, I got stuck. I couldn’t put a Label on top of an Image! Go ahead, try it. I’ll wait.

WatchKit Label Image

It’s all about the Group

Turns out, the key here is working with a Group vs an Image. Thanks @JohnyJWilson for figuring this out.

Add Group

The first step is to add the Group and configure it’s position and size to fit the screen or as appropriate:


Add Label

You can add a Label inside the Group and configure it’s position to be in the center as needed:


Create IBOutlets

Create IBOutlets for the Group and the Label.


Configure with Values

If you look into the WKInterfaceGroup interface, you can see that there are methods for setting and animating a background image!


Notice that you can even set a corner radius, which you cannot do for a WKInterfaceImage.

So now just set the group and label values, and you’re good to go!


Of course you can also set the values in the Storyboard, but I’m doing it specifically in code here because the image and label will most likely be dynamic in your own project.

You can download my sample project on Github here. Have fun!

Enjoy the article? Join over 20,000+ Swift developers and enthusiasts who get my weekly updates.