I re-created the Dynamic Island in SwiftUI 🏝

Dynamic Island on the iPhone 14 Pro’s

Hey guys, It’s been so long since I wrote an article.

But since I’m here, I would like to share the process of how I re-created the Dynamic Island using SwiftUI.

It was super simple and fun experimenting it.

So let’s don’t waste any time any time and get straight into it.

Download the assets first

For building this app, we are using some assets that we might need in-order to re-implement the Dynamic Island.

Download the assets in this Github directory.

Create a new XCode Project

To get started, create a new project in XCode. Choose SwiftUI and Click ‘Continue’.

Project creation

Setting the background to make it feel like a prototype

To make the prototype stand out, we are gonna use the iPhone 14 Pro’s official wallpaper as the background of our view. This is gonna give us that kind of cool effect!

Source code for setting background image

Getting some values for the Dynamic Island Capsule

In this part, we are retrieving some values for our layout like height, width, position (x and y) for the Dynamic Island Capsule.

The width of the view is 95% of the total screen’s available width, so that there is a consistent space between the edge of the screen and capsule.

Defining variables for positioning and setting the size of the view.

Setting up the layout

To setup the layout in any SwiftUI app, you need to think in the Stack kind of way, where everything is either aligned horizontally or vertically. I use this kind of trick to dig down any layout or view, to simply re-create or implement a UI.

The first thing we need to design are the container. We will use a VStack, to align things vertically with the first view for the info about the music and also displaying the waves according to the music’s sound. But we are not going to create the animated functionality according to the music.

The second view inside the VStack is showing the progress of the music. Where it displays how much time has been completed in the music and on the right side it shows how much time more to listen left.

The third view shows the controls available for the music, which has three buttons stacked together inside a VStack, and on the right side it shows the output device of the music. This view is pushed from the left using a Spacer to make it align to the right side. I think this is a great UX design from apple as people will more likely to use the right while using their phone. What do you think?

The result I got 🤩!

Designing the Layout for the Dynamic Island

Designing the Dynamic Island’s closed appearance

The closed appearance of the Dynamic Island requires use to store states and also modifying some existing styles.

We will declare some new variables for storing the height and width and also the Y-axis position of the Dynamic Island. This will help us make a consistent and much organised code.

We will also create a new state named capsuleClosed to store a boolean, if it is displayed or not.

We also created a new constant to store the animation we are gonna use when we toggle the visibility of the Dynamic Island.

This part of the code is much more complex than the others that I tried to match the animations of the Dynamic Island, we would’ve to use to the first view inside the container and show different views based on the state capsuleClosed.

We hide the other views other than the first view and also hides some of the views inside the first view. The music title and author is hidden and instead at two ends of the capsule, we displayed the thumbnail of the music and the waves.

To make this process feel a much more smoother, faster and intuitive I have integrated a spring animation to the onTapGesture.

The final result

The final result 🤩🏝!

Other example use cases for the Dynamic Island

You can get access to the source code and all of the other use cases of the Dynamic Island.

Join my Pro membership to get access to:

• Hundreds of resources and video tutorials on iOS Development in SwiftUI.
• Daily tips and tricks on SwiftUI
• Free Merch
• Free & Discounted offers on my Gumroad Products
• Early access to my limited amount of products.

All just for $15/month 🥹.

You could also get the ULTRA, where you could get all the benefits on the pro subscription and also you can get me to work on your projects.

This comes at a rate of $100/month.

Get your membership today 🥳!