Replicating Spotify UI: Xamarin Forms

3 min readOct 17, 2021

Introduction

Today we will be implementing a Spotify UI design from mobbin which can be found here. The final output will look like this.

Key Concepts Covered

Some of the key concepts and control we will use are the following:

Font Icons
ScrollView
Bindable Itemsource
Grid StackLayout
Text linebreak mode
AvatarView
ObservableCollection

1. Partition the design into smaller subsets

I usually take this approach so I can be able to write my code in bite-size chunks and focus and one and only one thing on the page, this helps keep my focus on one thing in case the design is a bit complex and overwhelming. In our case, this will be the basic partition that we will implement.

2. Create a file new Xamarin App.

Once done partitioning our page and we have a basic idea of how our page will be implemented, we can go ahead and create a file new Xamarin App. Since we are working on only one page of the design, all our code will be implemented in the MainPage.xaml

3. Include icon files

We have covered this part in another post in step number 3 too and it can be found here.

3. Part One: Implement App heading

Now back to our MainPage.xaml, the entire screen will be wrapped in a StackLayout. Inside that main StackLayout, we will implement the app heading control which is basically a horizontal StackLayout with 3 children, a Label, and two Images (for the Icons)

3. Part Two: Implement Artists List

The second part will be the list of artists which will be a StackLayout wrapped in a ScrollView and it will have the Artists ObservableCollection as the ItemsSource. So to keep this simple, so in the MainPage.xaml code behind let's prepare our MainPage.xaml.cs and set our public properties and populate the relevant data we will use at a later stage for the UI.

Now that our data in the code behind has been set and populated let's go back and implement the UI, Immediately after the StackLayout in part one let's implement the following ScrollView with a StackLayout as its child.

4. Part Three: Try Something Else List

Immediately after the ScrollView above, let us implement a StackLayout with a label as the heading for the Try Something else list, and after that StackLayout, let us implement a ScrollView with a StackLayout as its child and will make the BindableLayout.ItemSource to be the SomethingNew ObservableCollection we defined earlier.

5. Part Four: More like section

Immediately after the ScrollView above, let us implement a StackLayout with 2 children, an AvatarView, and a Label for the artist’s name

6. Finally

And finally, just below the StackLayout outlined in the above step, we will combine the last two controls into one StackLayout, with two children, both being StackLayouts too, the first one will be the Play/Love section of the App and the second one will be the AppBar at the bottom of the App.