Integrating Live Activity and Dynamic Island in iOS: A Complete Guide

#ios #codenewbie #tutorial

Background

With the release of iOS 16, Apple introduced Live Activities, and later with iPhone 14 Pro, the Dynamic Island—two powerful tools that allow us to present real-time, glanceable updates directly on the Lock Screen and at the top of the screen on the Dynamic Island. These features are designed to keep users informed about ongoing activities, like delivery tracking, live sports scores, or wait times, without requiring them to unlock their devices or open the app.

In this two-part guide, we’ll discuss everything you need to know to integrate Live Activities and Dynamic Island effectively in your iOS app. We'll detail each step from understanding design constraints to setting up a Live Activity, handling updates, and adding interactions.

What we're going to cover in this first part?

What Are Live Activities and Dynamic Island?
Live Activity presentations and constraints
Design layout for different presentations
Start, update and end the activity

Here's what will achieve at the end of this blog.

What Are Live Activities and Dynamic Island?

Live Activities allow apps to display real-time information on the Lock Screen. These updates are perfect for tracking time-sensitive events like food delivery, ride-sharing ETAs, etc.

Dynamic Island extends this functionality by offering a compact, interactive display area. Users can see and interact with live updates at the top of their screens while using other apps, creating a nondisturbing way to stay informed on background activities like calls, music, and live events.

Live Activity presentations and constraints

Before implementing Live Activities and Dynamic Island, it’s important to understand the design guidelines and presentation options available. Apple has specific constraints and recommendations to ensure that these features offer a consistent, user-friendly experience across apps.

Presentations for Live Activities

Live Activities offers different presentation styles on the Lock Screen and Dynamic Island. Understanding these styles is crucial to creating a well-designed Live Activity that feels native to iOS.

Lock Screen Presentation

On the Lock Screen, Live Activities appear as banners with detailed information. They provide a flexible area for displaying key data about your app’s real-time events, like estimated arrival, or live score updates.

Dynamic Island Presentations

Compact Presentation

The compact view is the most commonly seen view, typically displayed when the device is not actively engaged with ongoing tasks. It consists of two separate elements positioned on either side of the TrueDepth camera.

To ensure clarity, use consistent colors and typography for visibility, and avoid adding padding between the content and the camera to prevent misalignment.

Make sure that tapping on either the leading or trailing content opens the same scene in your app to provide a consistent and intuitive user experience.

Minimal Presentation

The minimal presentation is used when multiple Live Activities are active simultaneously. In this state, your Live Activity is displayed as a small circle or oval, either on the Dynamic Island or detached from it. This presentation should focus on delivering the most essential and up-to-date information.

Instead of a logo, display live, dynamic content like a countdown or real-time update of the essential information, even if it means abbreviating details. When users tap on the minimal display, it should open the app to the relevant event or task for more details. If the users touch and hold the minimal Live Activity, users can access essential controls or view more content in the expanded presentation.

Expanded Presentation

The expanded presentation appears when users tap and hold a compact or minimal Live Activity. This view gives more space for detailed information and interactions, while still keeping the smooth, rounded "capsule" shape.

Make sure the content expands in a way that feels natural and doesn’t cause confusion. If you need more vertical space, keep the edges curved to maintain a clean look. Avoid making the height awkward or uneven. Like the other presentations, keep your content aligned around the camera area to maintain a tidy and efficient layout.

Constraints

Avoid Overcrowding: Don’t overcrowd the Live Activity with too much information. Keep it concise and focus on the most relevant data to ensure clarity and a good user experience.
Content Alignment: When designing Live Activities, make sure content is properly aligned and visually balanced around the camera area (in the compact and expanded presentations) to avoid misalignment.
Image Asset Size: The image used in a Live Activity must fit within the size limits of the presentation for the device. If the image is too large, the system may not start the Live Activity. For example, an image for the minimal presentation should not exceed 45x36.67 points.
Duration of Live Activity: A Live Activity can be active for up to 8 hours. After this, the system automatically ends it and removes it from the Dynamic Island. However, it will stay on the Lock Screen for up to 4 more hours, or until manually removed, whichever happens first. This means a Live Activity can remain on the Lock Screen for a maximum of 12 hours.
Live Activity Sandbox: Each Live Activity runs in its own sandbox. Unlike widgets, it can't access the network or receive location updates. If you need to update the data, use ActivityKit in your app or allow the Live Activity to receive push notifications through ActivityKit.
Minimal Distractions: Since Live Activities are meant to provide quick, glanceable information, avoid cluttering them with non-essential details. Stick to only the most important and up-to-date data that users need to see at a glance.
Data size limit: The combined size of static and dynamic data for a Live Activity, including data for ActivityKit updates and ActivityKit push notifications, cannot exceed 4 KB. Keep the data within this limit to ensure proper functionality and smooth performance of your Live Activity.

Integrating Live Activity and Dynamic Island in iOS can greatly enhance the user experience by providing real-time updates and immersive interactions directly on the iPhone’s home screen.

To explore the full guide on seamlessly integrating these features, check out our complete blog at Canopas.

If you like what you read, be sure to hit 💖 button! — as a writer it means the world!

I encourage you to share your thoughts in the comments section below. Your input not only enriches our content but also fuels our motivation to create more valuable and informative articles for you.

Happy coding!👋