Activity Rings

Apps can enhance their health and wellness offerings by displaying an Activity ring element that shows an individual’s daily progress toward Move, Exercise, and Stand goals. Regardless of its size, the Activity ring element always contains three rings, whose colors and meanings match those provided by the Activity app.

Screenshot of the Activity app's first page, showing the Move ring at about 155 percent, the Exercise ring at about 130 percent, and the Stand ring at about 60 percent.

Display Activity rings in your app when they're relevant. Activity rings are an important component of the Apple Watch experience. If your app is related to health or fitness, and especially if it contributes information to HealthKit, people generally expect to find Activity rings in your interface. For example, if you structure a workout or health session around the completion of Activity rings, consider displaying the element on a workout metrics screen so that people can track their progress during their session. Similarly, if you provide a summary screen that appears at the conclusion of a workout, you could display Activity rings to help people check on their progress toward their daily goals.

Screenshot of a workout summary page that displays several types of metrics in a list. The top row lists active calories and contains the value 146 calories and a small image of the current Activity rings. The second row lists total calories and contains the value 211 calories. The third row lists average heart rate and contains the value 70 beats per minute and a small image of the Heart Rate app icon.

Use Activity rings only to show Move, Exercise, and Stand information. Activity rings are designed to consistently represent progress in these specific areas. Don’t attempt to replicate or modify Activity rings for other purposes. Never use Activity rings to display other types of data. Never show Move, Exercise, and Stand progress in another ring-like element.

Use Activity rings to show progress for a single person. Never use Activity rings to represent data for more than one person, and make sure it’s obvious whose progress you're showing, such as by using a label, a photo, or an avatar.

Don't send notifications that repeat the same information the Activity app sends. The system already delivers Move, Exercise, and Stand progress updates, so it's confusing for people to receive redundant information from your app. Also, don't show an Activity ring element in your app’s notifications. It’s fine to reference Activity progress in a notification, but do so in a way that’s unique to your app and doesn’t replicate the same information provided by the system.

Don’t use Activity rings for ornamentation. Activity rings should provide information to people, not embellish your app’s design. Never display Activity rings in labels or background graphics.

Don’t use Activity rings for branding. Use Activity rings strictly to display Activity progress in your app. Never use Activity rings in your app’s icon or marketing materials.

Maintain Activity ring colors. For a consistent user experience, the visual appearance of Activity rings must always be the same, regardless of the context in which they appear. Never change the look of the rings by using filters, changing colors, or modifying opacity. Instead, design the surrounding interface to blend with the rings. For example, enclose the rings and background within a circle. Always scale the rings appropriately so they don’t seem disconnected or out of place.

Always display Activity rings on a black background. The background is a key component of Activity ring presentation. Don't display the rings on anything other than a black background.

Maintain Activity ring margins. An Activity ring element must include a minimum outer margin of no less than the distance between rings. Never allow other elements to crop, obstruct, or encroach upon this margin or the rings themselves. To display an Activity ring element within a circle, adjust the corner radius of the enclosing view rather than applying a circular mask.

Differentiate other ring-like elements from Activity rings. Mixing different ring styles can lead to a visually confusing interface. If you must include other rings, use padding, lines, or labels to separate them from Activity rings. Color and scale can also help provide visual separation.

For guidance on designing a workout app, see Workout. For developer guidance, see WKInterfaceActivityRing.