Building the Spotify UI with Ionic
ฝัง
- เผยแพร่เมื่อ 6 ส.ค. 2024
- Let's build the popular Spotify UI with Ionic components and custom directives to create a stunning interface!
🔥 Learn Ionic faster with the Ionic Academy: ionicacademy.com/
💎 Get the Built with Ionic Book: builtwithionic.com/
🎉 Get my Practical Ionic Book: devdactic.com/practical-ionic/
#############################
👨💻 Want to read instead of watch?
Here's the full Ionic tutorial: devdactic.com/spotify-ui-with...
👇Get the assets for the tutorial:
github.com/saimon24/ionic-spo...
😱 NEW: Capacitor Crash Course!
ionicacademy.com/capacitor-cr...
⚡️Take my famous 7 Day Ionic Crash Course
ionicacademy.com/ionic-crash-...
🤷♂️Want more Ionic tutorials?
There you go: devdactic.com/
#############################
❤️You can also find me...
on / simongrimm_
on / schlimmson
on / devdactic
Or join our Facebook group:
/ simonics
#############################
00:00 Intro
01:54 Setting up the Ionic App
03:30 Adding Spotify Styling
05:26 Changing the Tab Bar
10:02 Dummy Audio Player UI
16:13 Overview Page & Horizontal Scroll
25:50 Album Details Page
35:02 Dynamic Gradient Background Color
41:15 Fade out image Directive
45:25 Finished Spotify UI
46:17 Outro - วิทยาศาสตร์และเทคโนโลยี
Want more? Check out some real Ionic clones here: th-cam.com/play/PLNFwX8PVq5q5K_ztYB5umsEu9p6SOQQSb.html
Make sure to subscribe for more! th-cam.com/users/simongrimmdev_?sub_confirmation=1
This is one of the finest piece of UI in Ionic I have seen so far
46:05 We understand, we understand. That's why we appreciate so much your videos. This one is a great collection of very useful techniques, amazing job Simon! Thank you very much
I liked this Simon, great UI in the end, and that image fading was cool to kill it off! good job.
your effort was worth it simon. thnx
The best short tutorial for ionic, I have ever seen. Thanks
Glad you think so!
Really nice effects. They give life to static elements. Thanks Simon!
Many thanks!
Allways love your content! keep it up! loving the more detailed ones.
Thanks, will do!
👌🏻amazing, now we’re waiting for EBAY UI 🥰
Amazing tricks and techniques Simon!! Thanks a lot for this tutorial :D
My pleasure!
Simon... I have been following you since 2017, but with this your new strategy of frontend and ui design your channel will hit 200k by the end of the year. Congratulations ahead of time
Haha thanks a lot!! Seems like people really enjoy this new type :)
Great video Simon. I am really enjoying this series of videos.
Glad you like them!
Really great UI/UX! Congratulations Simon!
Many thanks!
This serie is amazing!!!
Thanks Paulo!
Thank you for the video.
Thanks, Simmon
Woah Simon is in the correct track now 😍 This is how we can bring our loving ionic framework further. I always encourage people to do this kind of custom things rather than just using built-in components. Really Appreciate Simon.
Looking forward to see something like William Candillon for rn &
Simon Grimm for IONIC
Haha yeah I took some inspiration from William indeed :)
Amazing.. Keep going.❤
Cheers mate good stuff 🙂
Thanks for your videos Simon.
My pleasure :)
Wow, this came out really good! Building copy-cat apps is a really great way to reverse engineer a lot of real-world apps you see out in the wild. Thank you for this!
Glad you liked it, and agree!
amazing!!!
Ionic really is capable of very dynamic apps. @Simon many thanks for this tutorial
It really is!
great UI. it helps me a lot while i am going to make a music player app .
Glad it helped!
Thanks for this nice tutorial
You are welcome 😊
Amazing dude!
Thanks!
LOVE it
Wow, this is great UI!! When scroll-X ion-slides horizontally, tapping does not stop. How can I stop?
ありがとうございます。
Thanks for the awesome video Simon !
Maybe doing ``` newPadding = Math.min(100, newPadding) ``` would be prettier ?
Great suggestion!
Hi when I add the ion-slide in there I get an NG0300 code. Multiple components match node with tag name ion slide. when I comment it out it goes away
And how we make the backend? To reproduce the music
Cool
Ionic 👌🏾
Hi Simon, just wanted to know have you done any video on how to create api and select data into ionic pages? Would be a great help if you could direct me into any of your videos that can be of help. Thanks in advance!
I don't have tutorials on API building but I've done so for my projects, mostly using NestJS these days.
Hi, How can we create a calling notification to pop up in the background and if the screen is off wake up the screen?
For the routing, I see that you used tab1/:title. What if we wanted to access album from tab2 and tab3. Would we have to create two more sibling routes like tab2/:title and tab3/title. Is it not possible to create a shared route so all three tabs can access the albums page and the route could be tabs/:title?
I have a similar issue with my application as swipe to go back doesn’t work without it referencing the tab it’s in. If you take the Spotify application for example you can access album through the url simply by going to /album instead of adding the current tab as prefix.
Yes you can have multiple routes that show the same page, and that would be the way to go!
Hi Simon, I read on twitter that the angular cli now supports HMR, so can it be used in ionic development also ??
Yes when using Angular 11 you can run it like "ionic serve -- --hmr" (yes with 2 double dashes)
Hey Simon, I recently got an idea for a quick tutorial, on iOS when you go between pages the back button has the title of the previous page as the text of the back button. I tried to look for a solution for that but I haven't really found a good resource. Maybe you have an idea to do this feature in a clean way.
Thanks for the idea!
Could not find a declaration file for module '../../assets/mockdata/albums'. '/home/aashika/ionic/devdacticSpotify/src/assets/mockdata/albums/index.js' implicitly has an 'any' type.
how to solve the problem?
Yaaaaaaaaaaaaaaaaaay
Next episode TH-cam ui
Imagine you are a company like spotify and you pay developers like hell for that and there is that one simon in 47 min 😂😂
xD
Sketchware