Neumorphic Apple Music Player — Powered by SwiftUI

Learn how to use shadows to create Neumorphic components and use them to build Apple Music Player Now Playing view.

Photo by HalGatewood.com on Unsplash

In this tutorial, we will learn how to build Neumorphic views and use those components to build a Neumorphic version of the Apple Music Player using SwiftUI and Xcode. Before we begin, let’s look at what is SwiftUI.

“SwiftUI is an innovative, exceptionally simple way to build user interfaces across all Apple platforms with the power of Swift. Build user interfaces for any Apple device using just one set of tools and APIs. — Wikipedia. The best part is, you can integrate your views with components from UIKit, AppKit and WatchKit framework. SwiftUI has made building user interface straightforward.” — Apple Developer Xcode SwiftUI

To make a Neumorphic UI component, the only essential thing is Color. The entire Neumorphism revolves around choosing the right shade of color. I did tons of experiments with different colors before I could land on the one I think fits perfect. Good news for you, I have only documented my successful experiment here, and not the failed one.

We need three color sets here, one for the main body color, one for the top left shadow (light) and one for the bottom right shadow (dark). You can switch light and dark and keep experiment. For this experiments, I have chosen the following color sets:

• bg → R-223, B-235, G-228
• light → R-255, B-255, G-255
• dark → R-162, B-197, G-176

Light and dark are just lighter and darker color for the background “bg” color. This will give it the contrast we need in the shadows the show neumorphism. You can follow the following steps to add a new color set to Xcode:

1. Go to Assest.xcassets
2. Right-click and select “Color Set” from the menu and name it “Color” (default)
3. Select “Any Appearance” and change the input method under color to 8-bit (0–255). This will allow you to add the RGB value provided in the section above.
4. Once you have all three color sets, you can access them in the code by calling the string “Color”. For example, Color(“bg”), Color(“light”), Color(“dark”)

For every component, the idea is to use the lighter shadow on the right and bottom edge and darker shadow on the top and left edge, while the background of the view and the component maintain the same color. This gives the user an illusion that the components are embossed inside the background or protruding from within. Now that we have completed the setup let us look into the components one by one. I have added comments on the code to show what each component is doing.

Album art

We create a rounded rectangle and give it the same background as the entire app view background. Next, as discussed before, we add a darker shadow on the left and top and lighter shadow on the right and bottom. Finally, we add a blur to show a smooth transition. Below are the code and the final result it will translate into.

Album art after applying Neumorphic effects on the view

Buttons

Let’s get into how we can create buttons using the same modifiers,

Play Button after applying Neumorphic effects on the Button view

Draggable Volume Control

This one could be a little tricky to create; let’s look into everything we need one by one.

• First, we need a volume bar. SwiftUI provides a component called Capsule(). This is great because we would not need to use the clipShape modifier anymore.
• Second, we need a Circle() on top of the volume bar that we could drag to control the volume. We will append all the modifiers from previous components to make them neumorphic. To make it look nicer, I have also added another volume bar on top with a darker color shade to show the percentage of volume we are currently at.
• Finally, we want to ensure that the circle is draggable, so we had appended a DragGesture() modifier on the circle. Let’s get into what the code and result looks like,

Volume Control Bar after applying Neumorphic effects on the view

I have intentionally not included the entire code for the Apple Music Player Now Playing screen for you to practice and complete it with your imagination and design instincts. Once you put all components together, you get the final result looking like this:

Happy Hacking! Share, Follow and feel free to reach out on Twitter if you have any questions.