How to Build Spotify Clone in Android?

There are many android applications present in the market which are available to play songs on mobile phones. The famous one of all these music players is Spotify. In this article, we will be building a Spotify clone application using Spotify Web APIs.

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.

Step 2: Adding dependency

Navigate to Gradle Scripts > build.gradle.kts (Module :app) file and add the below dependency to it in the dependencies section.

dependencies {
 ...
 implementation ("com.android.volley:volley:1.2.1")
 implementation ("com.github.bumptech.glide:glide:4.16.0")
}

After adding the above dependency simply sync your project to install it. 

Step 3: Adding internet permissions

Navigate to app > AndroidManifest.xml file and add below internet permissions to it. 

<uses-permission android:name="android.permission.INTERNET" />

Step 4: Get Spotify client id and client secret key

• Navigate to Spotify Developer Console.
• Login with your existing spotify account or create a new account in Spotify - Signup.
• Click on your profile picture in the top right corner of the screen and select Dashboard or just go to Spotify for Developers - Dashboard.
• Now you will get to see an option Create app. Simply click on that option and then specify the app name and app description and create a new application.
• Now you will be navigated to the application inside which we will get to see the client id and client secret key.  We have to simply copy the client id and client secret key.

We will be using these 2 parameters in our MainActivity file in our project in Step 10.

Step 5: Updating colors.xml

Navigate to app > res > values > colors.xml file and add the below colors to it. Below is the code for the colors.xml file. 

colors.xml:

Step 6: Adding drawables

Navigate to app > res > drawables, right click on the folder and choose New > Drawable Resource File and create two such files as play.xml and search.xml. Then, add the following code to both of the files respectively.

Step 7: Working with activity_main.xml

Navigate to app > res > layout > activity_main.xml and add the following lines of code. Then, create a layout, album_rv_item.xml and add the below code.

Design UI:

Step 8: Create an album model class

Create a Java/Kotlin data class file AlbumModel and add the following code

Step 9: Creating an Adapter for each album

Create a new Java/Kotlin file AlbumAdapter and add the following code

Step 10: Working with MainActivity

Navigate to app > java > {package-name} > MainActivity.kt/.java and add the following code. Here we will be writing the code for the spotify home page.

Step 11: Create a new Activity (Search Activity)

Create a new activity with the name SearchActivity. Now, navigate to app > res > layout > activity_search.xml and add the following code. Then, create a layout track_rv_item.xml and add the following code respectively.

Design UI:

Step 12: Create a track model class

Create a Java/Kotlin data class file TrackModel and add the following code

Step 13: Create an Adapter for each music

Create a Java/Kotlin file TrackAdapter and add the following code.

Step 14: Working with SearchActivity

Navigate to SearchActivity and add the following code

Step 15: Create a new Activity (Album Detail Activity)

Create a new activity with the name AlbumDetailActivity. Then, navigate to app > res > layout > activity_album_detail.xml and add the following code

activity_album_detail.xml:

Design UI:

Step 16: Working with AlbumDetailActivity

Navigate to AlbumDetailActivity and add the following code

Refer to the following github repo to get the entire code: Spotify-Clone-in-Android

Output: