SwiftUI Tutorial – How to create a Music UI using Neumorphic Design.
Welcome to a new SwiftUI tutorial. We are going to be creating a MusicUI in SwiftUI and how we can use the Neumorphic Design to achieve this design.
Let’s get started 👌
Let’s open up Xcode and start a new project.
Then call the project MusicUI_Neumporphic_SwiftUI or whatever you want, then save the project.
Now we are setup this is what the ContentView looks like.
First, we are going to open up the Assets.xcassets folder. We are going to add in a New Color Set.
Select the new Color and in the Attributes inspector we are looking for the option Appearances. We are going to set this to Any, Dark.
This is going to be our background color for the app. So change the name of the color to Background.
Background Hex:
Any Appearance HEX: #DEEAF6
Dark Appearance HEX: #1A1B1E
Now do that again for two New Color Set’s and call them DarkShadow, LightShadow.
DarkShadow Hex:
Any Appearance HEX: #BECBD8
Dark Appearance HEX: #151518
LightShadow Hex:
Any Appearance HEX: #F3F9FF
Dark Appearance HEX: #242529
Now we have added our colors for Light and Dark Mode we are going to add two more colors for the PlayButton and the Player.
We are going to call our new colors cards. Here are the Hex Colors for them:
Card1 Hex:
Any Appearance HEX: #6A54FB
Dark Appearance HEX: #F3F8FF
Card2 Hex:
Any Appearance HEX: #13BDFC
Dark Appearance HEX: #6A54FB
Now we are going to create one more Color for the Text and add an Album cover for the design.
Text Hex:
Any Appearance HEX: #1A1B1E
Dark Appearance HEX: #DEEAF6
Now we have our Colors setup and ready we are now ready to go! 👍 We are going back into the ContentView and we are going to start creating the View!
We are going to use a VStack and add a spacing of 20 then we are going to use ZStack and inside we are going to create a Rectangle, this is going to be the background.
Now that is done we have to think about how we are going to organise our View so our code is clean and we have the UI exactly how we want it.
We are going to do this by adding a VStack with a spacing of 10. This is where we are going to add the different sections of our view into the main view. Let’s start by creating the top of the design. This is going to be the two buttons and the text.
Now we have created the topRow we can now add that to the VStack in the main View.
Now we are going to create the Album cover and place this under our topRow.
Now we have created the AlbumCover we can now add that to the VStack in the main View.
We are now going to create the player section this is going to contain the name of the song, name of the artist. Time of song and the time that it has been played.
Now we have created the Player we can now add that to the VStack in the main View. We have added an extra Spacer to this because we don’t want things to be on top of each other when we add in the final section of the design.
Now we are going to create the play button, Forward and Backward button. We are going to add a LinearGradient to the Play Button that matches the time played above.
Now we have created the circleButtons we can now add that to the VStack in the main View. We have added an extra Spacer to this because we don’t want the button touching the bottom on the View so this will bring everything up.
Awesome this looks dope! 💯 Let’s make our design better by allowing our app to change to DarkMode!
Conclusion 👏
Awesome, we have now finished this tutorial on how to create a MusicUI using Neumorphism Design. We have learnt how to create a new color set, ZStack, VStack and how to create loads of different shapes and much more. With this knowledge you should be able to create some dope designs in neumorphic.
If you would like the whole source code of this tutorial GitHub
I hope you have enjoyed this tutorial! If you want to learn more about SwiftUI and Neumorphism Design, check out our YouTube channel of other awesome SwiftUI tutorials. Also make sure to keep yourself up to date with our upcoming tutorials on Instagram
Thank you all for reading this content.
