let’s dev GmbH & Co. KG - The brand for groundbreaking custom software

Blog

Top!

let’s dev | Scroll to top
let’s dev | Scroll to next content item

Hello

let’s dev | Scroll to previous content item
let’s dev Blog | Discover Dynamic Island: another innovation in the world of iOS
by Nico
05. April 2024

Discover Dynamic Island: another innovation in the world of iOS

In the ever-evolving world of Apple's iOS operating system, there are always new innovations when it comes to how we use our devices. One of the newest and most exciting additions to the world of Apple is the “Dynamic Island” - a feature that revolutionizes the use of some apps and offers a new way of app notification. In this blog post you will not only learn how the Dynamic Island works and how it is structured, but also how you can implement such a Dynamic Island with Swift yourself.

What is Dynamic Island anyway?

The Dynamic Island is a visual and software-relevant innovation that transforms the front camera and speakers of the iPhone 14 Pro and Pro Max or newer into an oval “island”. Notifications, status updates, activities and displays can be integrated here, which can significantly improve the user experience.

At first sight, the “Dynamic Island” is simply a black cutout in the top center of the screen. However, this is where the sensors for the camera and Face ID are hidden. Furthermore the gap has been reduced by around 30 percent compared to its predecessor. Unlike the notch, the bar is also not permanently black. Instead, various functions and information are displayed here.

What tasks does the Dynamic Island fulfill?

The Dynamic Island gives users the option of displaying important real-time information without having to open the corresponding app. The advantage here is that users only receive the most important information and, if necessary, can display further important information with a quick press on the Dynamic Island or jump straight back into the app.

Structure of the Dynamic Island with Swift

In order to be able to integrate Dynamic Island into your own app, you must first ensure that Xcode is up to date. At the time of the article, this was 14.1. It must also be ensured that the app is compatible with iOS 16.4 or higher. Now that the most important basic requirements have been met, we can set “Supports Live Activities” to “Yes” in the info.plist. We need to do this in order to support Apple's Live Activity Library in our project.

Now, if not already implemented, the WidgetKit framework must be added to your project. Since the WidgetKit framework offers us a special configuration type called ActivityConfiguration, we can now define a live activity widget.

Example of Dynamic Island

Figure 1: The Dymanic Island shows notifications and live activities such as calls, timers, music control and much more right to the front

@available(iOSApplicationExtension 16.1, *)
struct FastingActivityWidget: Widget {
    var body: some WidgetConfiguration {
        ActivityConfiguration(for: FastingAttributes.self) { context in
            LiveActivityView(context: context)
                .padding(.horizontal)
        } dynamicIsland: { context in
            DynamicIsland {
                DynamicIslandExpandedRegion(.leading) {
                    LiveActivityView(context: context)
                }
            } compactLeading: {
                Image(systemName: "circle")
                    .foregroundColor(.green)
            } compactTrailing: {
                Text(verbatim:
context.state.progress.formatted(.percent.precision(.fractionLength(0))))
                    .foregroundColor(context.state.stage?.color)
            } minimal: {
                Image(systemName: "circle")
                    .foregroundColor(.green)
            }
        }
    }
}

In this example, we use the ActivityConfiguration type to define a SwiftUI view that is displayed on the lock screen and is also used to display the Dynamic Island.

Image of the compact representation of Dynamic Island

Figure 2: Compact representation

The compact display of the Dynamic Island is always used by the system when only one live activity is active. The compact display consists of two separate elements: one that is displayed on the left side of the front camera and one that is displayed on the right side. Although the compact display offers little space, it shows current information about the live activity of an app.

Image of the minimal representation of Dynamic Island

Figure 3: Minimal representation

If several live activities are active, the system uses the minimal display to show two of them in the Dynamic Island. One live activity is attached to the Dynamic Island, while the other appears detached. Depending on the size of the content, the separated minimal live activity appears circular or oval. As with the compact view, users can tap on the minimal live activity to open an app, learn more details about the event or task, or touch and hold it to use key controls and view additional content in the expanded view.

Image of the extended display of Dynamic Island

Figure 4: Extended representation

Finally, we have the extended display of the Dynamic Island, which is displayed when the user presses a little longer on the Dynamic Island. This gives the Dynamic Island more space to display information.

Examples of helpful information on Dynamic Island

Figure 5: From tracking hikes to the weather forecast to the countdown for the current workout - helpful information in a compact and clever UI

Conclusion

Implementing the Live Activity API into an iOS app can be a great way to improve the app and provide users with a better app experience. In addition, Dynamic Island is still in its infancy and will certainly receive even more fascinating enhancements from Apple in the future to provide users with an even better iPhone experience.

More articles from our blog

let’s dev Blog | Apple Intelligence and ChatGPT: The highlights of WWDC24

Technical

Apple Intelligence and ChatGPT: The highlights of WWDC24

by Julian

2024-06-13

Read more
let’s dev Blog | Big, bigger, OMR: let's dev and Kortpress at the OMR Festival 2024

Corporate

Big, bigger, OMR: let's dev and Kortpress at the OMR Festival 2024

by Julian

2024-05-24

Read more
let’s dev Blog |  The World Usability Day 2023

Corporate

The World Usability Day 2023

by Sina

2023-11-10

Read more
let’s dev Blog | Adobe Max 2023

Corporate

Adobe Max 2023

by Julia

2023-10-13

Read more
let’s dev Blog | Accessibility in web development

Technical

Accessibility in web development

by Sarah

2023-10-31

Read more
let’s dev Blog | Digital wallet cards: Strengthening customer engagement in the digital age

Corporate

Digital wallet cards: Strengthening customer engagement in the digital age

by Julian

2023-07-07

Read more
let’s dev Blog | Kortpress at the OMR Festival 2023 in Hamburg

Corporate

Kortpress at the OMR Festival 2023 in Hamburg

by Julian

2023-05-31

Read more
let’s dev Blog | Recap 2022: Smart Devices, Platform Business and innovative Research Projects

Corporate

Recap 2022: Smart Devices, Platform Business and innovative Research Projects

by Julian

2023-01-31

Read more
let’s dev Blog | Creating animations for websites using LottieFiles

Corporate

Creating animations for websites using LottieFiles

by Julian

2022-12-15

Read more
let’s dev Blog | Lean in Software Development

Technical

Lean in Software Development

by Sabrina

2022-12-08

Read more
let’s dev Blog | Adobe Max - Live from LA

Corporate

Adobe Max - Live from LA

by Jessica

2022-10-28

Read more
let’s dev Blog | Mensch und Computer 2022 - Facing Realities

Corporate

Mensch und Computer 2022 - Facing Realities

by Kerstin

2022-09-12

Read more
let’s dev Blog | EUREKA Innovation Award

Corporate

EUREKA Innovation Award

by Karl

2022-06-23

Read more
let’s dev Blog | WWDC 2022: Our update on Apple's new operating systems

Technical

WWDC 2022: Our update on Apple's new operating systems

by Julian

2022-06-08

Read more
let’s dev Blog | Docker and the hidden security hole

Technical

Docker and the hidden security hole

by Martin

2022-02-17

Read more
let’s dev Blog | The Christmas holidays are just around the corner - We are looking forward to the next year 2022!

Corporate

The Christmas holidays are just around the corner - We are looking forward to the next year 2022!

by Julian

2021-12-22

Read more
let’s dev Blog | Production and assembly of stacks and electro­lysers for hydrogen production

Corporate

Production and assembly of stacks and electro­lysers for hydrogen production

by Anton

2021-12-21

Read more
let’s dev Blog | Adobe Max 2021 - A global celebration of creativity

Corporate

Adobe Max 2021 - A global celebration of creativity

by Julia

2021-11-02

Read more
let’s dev Blog | Relational databases compared to object-oriented databases

Technical

Relational databases compared to object-oriented databases

by Julian

2021-10-14

Read more
let’s dev Blog | Apple Developer Program: What is it used for and what content does it offer me as a member?

Corporate

Apple Developer Program: What is it used for and what content does it offer me as a member?

by Julian

2021-09-30

Read more
let’s dev Blog | Sketch, Figma & Co. - We take a look at the most popular UI and Prototyping Tools in 2021

Corporate

Sketch, Figma & Co. - We take a look at the most popular UI and Prototyping Tools in 2021

by Ellen

2021-07-15

Read more
let’s dev Blog | Tailwind: An innovative project for the future use of old wind turbines

Corporate

Tailwind: An innovative project for the future use of old wind turbines

by Karl

2021-06-24

Read more
let’s dev Blog | Features, Fixes and Functions - A WWDC 2021 Sumup

Corporate

Features, Fixes and Functions - A WWDC 2021 Sumup

by Julian

2021-06-10

Read more
let’s dev Blog | Smart Prognosis of Energy with Allocation of Resources

Corporate

Smart Prognosis of Energy with Allocation of Resources

by Karl

2021-02-18

Read more
let’s dev Blog | Dasoman - Data-Sovereignty-Manager

Corporate

Dasoman - Data-Sovereignty-Manager

by Karl

2021-01-11

Read more
let’s dev Blog | We look back on the past months - And wish all the best for the coming year 2021!

Corporate

We look back on the past months - And wish all the best for the coming year 2021!

by Julian

2020-12-17

Read more
let’s dev Blog | iOS User Interface Tests

Technical

iOS User Interface Tests

by Nicolas

2020-11-12

Read more
let’s dev Blog | Adobe Max - Online for the first time

Corporate

Adobe Max - Online for the first time

by Julia

2020-10-29

Read more
let’s dev Blog | CAN2BLE

Technical

CAN2BLE

by Raphael

2020-09-24

Read more
let’s dev Blog | Mensch und Computer 2020 - Digital Change in the Flow of Time

Corporate

Mensch und Computer 2020 - Digital Change in the Flow of Time

by UX Team

2020-09-18

Read more
let’s dev Blog | Neumorphism – A new era of user interface design?

Technical

Neumorphism – A new era of user interface design?

by Julian

2020-08-13

Read more
let’s dev Blog | UX Research Part 3 - UX Methods

Technical

UX Research Part 3 - UX Methods

by Elena

2020-05-28

Read more
let’s dev Blog | UX Research Part 2 - What is UCD and what does User Research have to do with it?

Technical

UX Research Part 2 - What is UCD and what does User Research have to do with it?

by Elena

2020-04-23

Read more
let’s dev Blog | go-digital promotes establishment of home office workstations

Corporate

go-digital promotes establishment of home office workstations

by Karl

2020-03-19

Read more
let’s dev Blog | Google Passes - Card Management on Android Devices

Technical

Google Passes - Card Management on Android Devices

by Michelle

2020-03-12

Read more
let’s dev Blog | 100% code coverage in software testing - a reasonable goal?

Technical

100% code coverage in software testing - a reasonable goal?

by Raphael

2020-03-06

Read more
let’s dev Blog | Swift UI - Simple and fast implementation of user interfaces

Technical

Swift UI - Simple and fast implementation of user interfaces

by Tobias

2020-03-02

Read more
let’s dev Blog | In dialog with the business juniors - Exciting insights into business start-ups and digital transformation

Corporate

In dialog with the business juniors - Exciting insights into business start-ups and digital transformation

by Julian

2020-02-27

Read more
let’s dev Blog | Simplified testing of iOS push notifications in the simulator with Xcode 11.4

Technical

Simplified testing of iOS push notifications in the simulator with Xcode 11.4

by Manuel

2020-02-26

Read more
let’s dev Blog | National meeting of the consortium of the SPEAR research project at let's dev in Karlsruhe

Corporate

National meeting of the consortium of the SPEAR research project at let's dev in Karlsruhe

by Karl

2020-01-27

Read more
let’s dev Blog | UX Research Part 1 - Why User Research is so important

Technical

UX Research Part 1 - Why User Research is so important

by Elena

2020-01-23

Read more
let’s dev Blog | Dark Mode

Technical

Dark Mode

by Elisa

2020-01-09

Read more
let’s dev Blog | We wish you a Merry Christmas - And a Happy New Year!

Corporate

We wish you a Merry Christmas - And a Happy New Year!

by Julian

2019-12-20

Read more
let’s dev Blog | Exchange on the topic of digitization with the Business Club Luxembourg at the Embassy of Luxembourg in Berlin

Corporate

Exchange on the topic of digitization with the Business Club Luxembourg at the Embassy of Luxembourg in Berlin

by Karl

2019-12-17

Read more
let’s dev Blog | DaSoMan at the Internet+ Expo in Foshan (China)

Corporate

DaSoMan at the Internet+ Expo in Foshan (China)

by Karl

2019-12-13

Read more
let’s dev Blog | Google Play Console: Pre-Launch Reports

Technical

Google Play Console: Pre-Launch Reports

by Fabian

2019-12-11

Read more
let’s dev Blog | DevFest 2019 in Hamburg

Technical

DevFest 2019 in Hamburg

by Julian

2019-12-05

Read more
let’s dev Blog | Vernissage digital art in the media theater of the Humboldt University Berlin

Corporate

Vernissage digital art in the media theater of the Humboldt University Berlin

by Karl

2019-11-21

Read more
let’s dev Blog | World Usability Day 2019 in Karlsruhe - let's dev supports as main sponsor

Corporate

World Usability Day 2019 in Karlsruhe - let's dev supports as main sponsor

by Aileen

2019-11-11

Read more
let’s dev Blog | Gutted - Open Day at the Alter Schlachthof Karlsruhe 2019

Corporate

Gutted - Open Day at the Alter Schlachthof Karlsruhe 2019

by Julian

2019-09-26

Read more
let’s dev Blog | Mensch und Computer 2019 - Conference on User Experience and Usability in Hamburg

Corporate

Mensch und Computer 2019 - Conference on User Experience and Usability in Hamburg

by Elena

2019-09-17

Read more
let’s dev Blog | Business and Enterprise App Distribution on iOS

Technical

Business and Enterprise App Distribution on iOS

by Aileen

2019-08-05

Read more
let’s dev Blog | Digital Transformation - Chances and Challenges in the Automotive Industry, Agriculture and New Technologies

Corporate

Digital Transformation - Chances and Challenges in the Automotive Industry, Agriculture and New Technologies

by Karl

2019-07-17

Read more
let’s dev Blog | let's dev supports runners at the 7th KIT Championship

Corporate

let's dev supports runners at the 7th KIT Championship

by Karl

2019-07-05

Read more
let’s dev Blog | Automated testing of C++ code with Google Test and Google Mock - Part 2

Technical

Automated testing of C++ code with Google Test and Google Mock - Part 2

by Arne

2019-06-13

Read more
let’s dev Blog | Apple WWDC 2019: These are the highlights of the keynote

Technical

Apple WWDC 2019: These are the highlights of the keynote

by Nicolas

2019-06-05

Read more
let’s dev Blog | App Builders 2019

Technical

App Builders 2019

by Nicolas

2019-05-23

Read more
let’s dev Blog | Official opening of the Consolidation and Expansion Center (FUX)

Corporate

Official opening of the Consolidation and Expansion Center (FUX)

by Helena

2019-04-15

Read more
let’s dev Blog | Delegation from Nottingham to visit the Alter Schlachthof in Karlsruhe

Corporate

Delegation from Nottingham to visit the Alter Schlachthof in Karlsruhe

by Helena

2019-04-14

Read more
let’s dev Blog | The time has come: We are moving!

Corporate

The time has come: We are moving!

by Helena

2019-03-26

Read more
let’s dev Blog | Automated testing of C++ code with frameworks - part 1

Technical

Automated testing of C++ code with frameworks - part 1

by Arne

2019-02-20

Read more
let’s dev Blog | The app in the Google Play Store

Technical

The app in the Google Play Store

by Elisa

2019-01-24

Read more
let’s dev Blog | „UX Day“ 2018

Corporate

„UX Day“ 2018

by Aileen

2018-12-17

Read more
let’s dev Blog | let's dev supports SG Siemens volleyball players from Karlsruhe

Corporate

let's dev supports SG Siemens volleyball players from Karlsruhe

by Helena

2018-12-04

Read more
let’s dev Blog | SMEs shape digitalization - SME Conference 2018

Corporate

SMEs shape digitalization - SME Conference 2018

by Helena

2018-11-12

Read more
let’s dev Blog | Apple Wallet

Technical

Apple Wallet

by Maik

2018-10-26

Read more
let’s dev Blog | „Mensch und Computer“ 2018

Corporate

„Mensch und Computer“ 2018

by Judith

2018-09-24

Read more
let’s dev Blog | State Design Pattern in Android

Technical

State Design Pattern in Android

by Thomas

2018-09-17

Read more
let’s dev Blog | let's dev is an authorized consulting company in the „go-digital“ funding program

Corporate

let's dev is an authorized consulting company in the „go-digital“ funding program

by Helena

2018-09-01

Read more
let’s dev Blog | App Design & Development Conference 2018

Corporate

App Design & Development Conference 2018

by Helena

2018-08-14

Read more
let’s dev Blog | iOS 12: The top new features at a glance

Technical

iOS 12: The top new features at a glance

by Nicolas

2018-07-17

Read more
let’s dev Blog | let's dev at CEBIT

Corporate

let's dev at CEBIT

by Karl

2018-06-11

Read more
let’s dev Blog | Introduction to User Interface (UI) Testing with Espresso

Technical

Introduction to User Interface (UI) Testing with Espresso

by Raphael

2018-06-07

Read more
let’s dev Blog | The app in the Apple App Store: what information is needed?

Technical

The app in the Apple App Store: what information is needed?

by Aileen

2018-04-27

Read more
let’s dev Blog | Smart Pointer in C++

Technical

Smart Pointer in C++

by Matthias

2018-04-01

Read more
let’s dev Blog | User interface design for iPhone X: all innovations at a glance

Technical

User interface design for iPhone X: all innovations at a glance

by Helena

2018-02-07

Read more
let’s dev Blog | WebVR - Virtual Reality Experience in the Browser with the A-Frame Framework

Technical

WebVR - Virtual Reality Experience in the Browser with the A-Frame Framework

by Judith

2018-01-10

Read more
let’s dev Blog | Deutsche Bahn Open Data Hackathon

Corporate

Deutsche Bahn Open Data Hackathon

by Karl

2015-03-31

Read more
let’s dev Blog | Blur effects under iOS 7

Technical

Blur effects under iOS 7

by Katja

2014-04-24

Read more
let’s dev Blog | Beyond App Store - iOS application distribution

Technical

Beyond App Store - iOS application distribution

by Karl

2012-08-27

Read more
let’s dev Blog | Front-end architecture - Model View Presenter and Message Bus

Technical

Front-end architecture - Model View Presenter and Message Bus

by Karl

2011-03-08

Read more