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

First of all, when creating an interface, you must decide how many and what kind of screens (pages) do you need for an app. In this case, our work is cut short, since we will follow the example of an existing app. However, since most of the pages of the actual app are quite similar in design with just slight differences in their functionality, we will limit the number of pages to three:

• 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

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

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

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!!!

We hope this little pattern of ours will give you an inspiration about how to design your app. But this is not all! We created several patterns based on popular apps like this one, which can be accessed on our tutorial page and hope that they will be of help to you!

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! ★★★★★