How to Create a Spotify like Awesome UI Using Onsen UI

For those may not know, Onsen UI offers a rich variety of UI components and tons of ready to implement features, specially designed for mobile apps. However, with all these possibilities one can’t help but be puzzled about how can all these components be combined to create an app. For that purpose, we in the Onsen UI team will show you how to use a combination of Onsen UI components to create a user interface pattern almost identical to the one of the popular music app Spotify!

The Pages

  • Browsing Page
  • Playlist Page
  • Play Screen Page

We shall go through these three pages briefly so that we give you the general idea of how you can easily combine components to create an interface on par with the ones of popular apps. For the complete user interface pattern, please visit our tutorial page.

Note: We will not implement the different functionalities of the interface (except some that are necessary for the flow of the app) since that is not the purpose of this post.

The Browsing Page

Image for post
Image for post

The first page of this pattern is the Browsing Page which allows the users to browse through playlists and find one that suits their tastes. The implementation of this page is quite simple. It’s constructed with the following Onsen UI elements: <ons-carousel>, <ons-list>, <ons-row>, and <ons-col>.

On the top, we have a carousel which elements have fixed length to get the overflowing horizontal list look, displaying the list of playlists the app recommends to the user:

Followed by a standard vertical list, giving more options for categorizing the playlists:

And last but not least, a grid-like pattern used to categorize the playlists by Genre and Mood, constructed by using the combination of <ons-row> and <ons-col> elements:

After tapping on some of the recommended playlists or Genres/Moods, the Playlist Page is opened. Notice that the items in the vertical list won’t activate anything upon tapping them since this would lead to a screen with similar content, but a different organization of the playlist.

For the detail code of this page, including the CSS classes, visit our tutorial page.

The Playlist Page

Image for post
Image for post

The Playlist Page consists of two parts. The first one consists of a carousel showing details about the playlist at the top:

The carousel has two pages (items), the first one presenting the cover of the playlist, the name, number of followers and author, while the second one displays a small description about the playlist as well as the date of upload, and the total duration of the playlist.

The second part consists of the list of the playlist’s tracks, where the first element of the list is an option allowing for the playlist to be played in offline mode:

What’s peculiar about the list’s elements is that each track element has a three dotted icon on the right, which appears horizontally in the case of iOS or vertically in the case of Android. This is accomplished by providing the name of the icon, that will appear on Android, with the material keyword after the name of the default icon.

Moreover, the two parts are separated by the “Shuffle Play!” <ons-button> which, when tapped, shows the <ons-toast> element at the bottom of the screen, showing the currently playing track:

By tapping this <ons-toast> element, the Play Screen will open.

The Play Screen

Image for post
Image for post

This screen is rather simple, however, it contains some interesting components that make its creation quite easy:

Apart from the <ons-toolbar>, this screen consists of one standard <div> element, containing the album’s cover and three<ons-row> wrapper elements for easily structuring the screen. These elements are used to show the title of the track, the duration as well as the current progress of the playing track and buttons usually found in a music player. Each <ons-row> is divided into equal width parts by using as many <ons-col> elements as the number of parts you need.

Although this screen is simple, it can be further improved by enclosing the image and the first <ons-row> into a carousel, thus enabling songs switching by swiping the carousel.

There’s More!!!

Stay tuned to Onsen UI for even more fun content and new updates!

Onsen UI is an open source library used to create the user interface of hybrid apps. You can find more information on our GitHub page. If you like Onsen UI, please don’t forget to give us a star! ★★★★★

The Web Tub

Pushing the web current through hybrid mobile and PWA…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store