# Dynamic Island

> The Dynamic Island is the black pill around the iPhone’s front camera that grows to show live information, such as a timer, a delivery or a call. A Live Activity is what an app shows in it and on the Lock Screen.

Page: https://www.appetiteui.com/academy/glossary/dynamic-island. Dynamic Island in Figma: sizes and states. Also called Live Activity.

## At a glance

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | Dynamic Island and Live Activities | No equivalent | iOS / Dynamic Island, with System and Expanded sets |

## In practice

The island has four presentations: idle, minimal, compact and expanded. An app designs its compact and expanded layouts; the system decides when each one shows.

Appetite UI draws the Dynamic Island as one black pill in three sets: the four presentations of one activity, the system presentations and the expanded layouts. Android has no counterpart.


Dynamic Island, the four presentations, state, size, radius, what it shows:

| State | Size | Radius | What it shows |
| --- | --- | --- | --- |
| Idle | 125 × 37 | 18.5 | The sensor cutout at rest |
| Minimal | 170 × 37 | 18.5 | An attached pill with a detached 37 capsule |
| Compact | 201 × 37 | 18.5 | A leading icon and a trailing label around the cutout |
| Expanded | 371 × 130 | 44 | Title, subtitle, trailing value, progress and times |

## Questions

### How big is the Dynamic Island?

Appetite UI draws it at 125 by 37 at rest, 201 by 37 compact and 371 by 130 expanded on a 393 point iPhone. Apple publishes the 44 point corner radius of the expanded card and lets it grow between 84 and 160 points tall.

### What is a Live Activity?

A Live Activity shows a task that is under way, such as a delivery, a ride or a match score, on the Lock Screen and in the Dynamic Island. The app designs its compact, minimal and expanded layouts.

## Sources

1. [Apple Human Interface Guidelines: Live Activities](https://developer.apple.com/design/human-interface-guidelines/live-activities)

## Related

- Docs: [iOS](https://www.appetiteui.com/docs/ios)
- Article: [How to design a Live Activity and the Dynamic Island in Figma](https://www.appetiteui.com/blog/dynamic-island-live-activity-figma)
- Glossary: [Status bar](https://www.appetiteui.com/academy/glossary/status-bar)
- Glossary: [Liquid Glass](https://www.appetiteui.com/academy/glossary/liquid-glass)