CodrGeek is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our Privacy Policy Explore Now!
Home
Android
Java

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.

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. A sample video is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language.


How to Build Spotify Clone in Android?
How to Build Spotify Clone in Android?


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. Note that select Java as the programming language.

Step 2: Add dependency to use volley for json parsing in android

Navigate to app>Gradle Scripts>build.gradle file and add the below dependency to it in the dependencies section.

implementation 'com.android.volley:volley:1.2.1'
implementation 'com.squareup.picasso:picasso:2.71828'

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

Step 3: Create a new application on Spotify Console

Navigate to Spotify Developer Console. Simply Login with your username and password. Now you will get to see an option to create a new 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 app client id and app client secret key.  We have to simply copy the client id and client secret key. We will be using these 2 parameters for generating our authorization. Now for generating authorization we have to paste the client id and client secret key in the below format.

client_id:client_secret_key

After adding it to this format. Simply copy the complete string and now we will be converting this string to base64. For converting it. We have to navigate to the below URL. On this website, we have to paste the above-copied client id and client secret key in the above format. Then convert it into base 64 to generate our authorization. Now we will be using this authorization to generate our access token which we will be using to access the data from Spotify. 

Note: You can also refer below documentation on How to generate authorization to use Spotify APIS.

Step 4: Updating theme and colors within our project

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



<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#141414</color>
    <color name="purple_500">#141414</color>
    <color name="purple_700">#141414</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="back_color">#141414</color>
    <color name="fab_color">#20D761</color>
</resources>

Now for updating the theme of our project. Navigate to app>res>values>themes> Change theme from Dark Action Bar to No Action Bar. Below is the code for the themes.xml file. 


<resources xmlns:tools="http://schemas.android.com/tools">
	<!-- Base application theme. -->
	<style name="Theme.SpotifyJava" parent="Theme.MaterialComponents.DayNight.NoActionBar">
		<!-- Primary brand color. -->
		<item name="colorPrimary">@color/purple_500</item>
		<item name="colorPrimaryVariant">@color/purple_700</item>
		<item name="colorOnPrimary">@color/white</item>
		<!-- Secondary brand color. -->
		<item name="colorSecondary">@color/teal_200</item>
		<item name="colorSecondaryVariant">@color/teal_700</item>
		<item name="colorOnSecondary">@color/black</item>
		<!-- Status bar color. -->
		<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
		<!-- Customize your theme here. -->
	</style>
</resources>

Step 5: Create a new layout file for the Album item to be displayed in RecyclerView

Navigate to app>res>layout> Right-click on it>New Layout Resource file. Name it album_rv_item and add the below code to it. Comments are added in the code to get to know it in detail. 


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_centerInParent="true"
	android:layout_gravity="center"
	android:layout_margin="4dp"
	android:background="@color/back_color"
	android:padding="4dp">
	
	<!--image view for displaying album image-->
	<ImageView
		android:id="@+id/idIVAlbum"
		android:layout_width="120dp"
		android:layout_height="120dp" />

	<!-- text view for displaying album name -->
	<TextView
		android:id="@+id/idTVAlbumName"
		android:layout_width="120dp"
		android:layout_height="wrap_content"
		android:layout_below="@id/idIVAlbum"
		android:layout_margin="3dp"
		android:lines="1"
		android:maxLines="1"
		android:padding="4dp"
		android:text="Album Name"
		android:textColor="@color/white"
		android:textSize="12sp"
		android:textStyle="bold" />

	<!-- text view for displaying album artist-->
	<TextView
		android:id="@+id/idTVALbumDetails"
		android:layout_width="120dp"
		android:layout_height="wrap_content"
		android:layout_below="@id/idTVAlbumName"
		android:layout_marginStart="3dp"
		android:layout_marginTop="-5dp"
		android:layout_marginEnd="3dp"
		android:lines="1"
		android:maxLines="1"
		android:padding="4dp"
		android:text="Album Details"
		android:textColor="@color/white"
		android:textSize="12sp" />

</RelativeLayout>

Step 6: Working with the activity_main.xml file

Navigate to app>res>layout>activity_main.xml file and add the below code to it. Comments are added in the code to get to know it in detail. 

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/back_color"
    tools:context=".MainActivity">
  
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/back_color">
  
        <!-- text view to display greeting-->
        <TextView
            android:id="@+id/idTVGreetHeading"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:padding="10dp"
            android:text="Good afternoon"
            android:textColor="@color/white"
            android:textSize="20sp"
            android:textStyle="bold" />
  
        <!-- text view to display search heading-->
        <TextView
            android:id="@+id/idTVSearchHeading"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/idTVGreetHeading"
            android:layout_marginStart="10dp"
            android:layout_marginEnd="10dp"
            android:padding="10dp"
            android:text="Search"
            android:textColor="@color/white"
            android:textSize="20sp"
            android:textStyle="bold" />
  
        <!-- edit text  to search songs-->
        <EditText
            android:id="@+id/idEdtSearch"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_below="@id/idTVSearchHeading"
            android:layout_marginStart="10dp"
            android:layout_marginTop="5dp"
            android:layout_marginEnd="10dp"
            android:layout_marginBottom="5dp"
            android:background="@color/white"
            android:hint="Artists,songs or podcasts"
            android:imeOptions="actionDone"
            android:lines="1"
            android:padding="10dp"
            android:singleLine="true"
            android:textColorHint="@android:color/darker_gray"
            android:textStyle="bold" />
  
        <!-- text view to display heading-->
        <TextView
            android:id="@+id/idTVHeading1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/idEdtSearch"
            android:layout_marginStart="10dp"
            android:layout_marginEnd="10dp"
            android:padding="10dp"
            android:text="Recommended for Today"
            android:textColor="@color/white"
            android:textSize="20sp"
            android:textStyle="bold" />
  
        <!-- recycler view for various albums-->
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/idRVAlbums"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/idTVHeading1"
            android:layout_margin="4dp"
            android:orientation="horizontal"
            android:padding="4dp"
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
            tools:listitem="@layout/album_rv_item" />
  
        <!-- text view to display heading-->
        <TextView
            android:id="@+id/idTVHeading2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/idRVAlbums"
            android:layout_marginStart="10dp"
            android:layout_marginEnd="10dp"
            android:padding="10dp"
            android:text="Popular Albums"
            android:textColor="@color/white"
            android:textSize="20sp"
            android:textStyle="bold" />
  
        <!-- recycler view for popular albums-->
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/idRVPopularAlbums"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/idTVHeading2"
            android:layout_margin="4dp"
            android:orientation="horizontal"
            android:padding="4dp"
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
            tools:listitem="@layout/album_rv_item" />
  
        <!-- text view to display heading-->
        <TextView
            android:id="@+id/idTVHeading3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/idRVPopularAlbums"
            android:layout_marginStart="10dp"
            android:layout_marginEnd="10dp"
            android:padding="10dp"
            android:text="Trending now"
            android:textColor="@color/white"
            android:textSize="20sp"
            android:textStyle="bold" />
  
        <!-- recycler view for various albums-->
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/idRVTrendingAlbums"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/idTVHeading3"
            android:layout_margin="4dp"
            android:orientation="horizontal"
            android:padding="4dp"
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
            tools:listitem="@layout/album_rv_item" />
  
    </RelativeLayout>
    
</ScrollView>

Step 7: Creating a Modal class for Album Details

Navigate to app>java>your app’s package name>Right click on it>New Java class and name it as AlbumRVModal and add the below code to it. Comments are added in the code to get to know it in detail. 

package com.gtappdevelopers.spotify_java;
  
public class AlbumRVModal {
    // o below line creating variables
    // for different parameters.
    public String album_type;
    public String artistName;
    public String external_ids;
    public String external_urls;
    public String href;
    public String id;
    public String imageUrl;
    public String label;
    public String name;
    public int popularity;
    public String release_date;
    public int total_tracks;
    public String type;
  
    // creating constructor on below line.
    public AlbumRVModal(String album_type, String artistName, String external_ids, String external_urls, String href, String id, String imageUrl, String label, String name, int popularity, String release_date, int total_tracks, String type) {
        this.album_type = album_type;
        this.artistName = artistName;
        this.external_ids = external_ids;
        this.external_urls = external_urls;
        this.href = href;
        this.id = id;
        this.imageUrl = imageUrl;
        this.label = label;
        this.name = name;
        this.popularity = popularity;
        this.release_date = release_date;
        this.total_tracks = total_tracks;
        this.type = type;
    }
}

Step 8: Create a new activity to display songs in the album

Navigate to app>java>your app’s package name> Right-click on it>New Activity>Empty Activity and name it as AlbumDetailActivity. 

Step 9: Create an adapter class for the albums RecyclerView

Navigate to app>java>your app’s package name>Right click on it>New Java class and name it as AlbumRVAdapter and add the below code to it. Comments are added in the code to get to know it in detail. 

package com.gtappdevelopers.spotify_java;
  
import android.content.Context;
import android.content.Intent;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
  
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
  
import com.squareup.picasso.Picasso;
  
import java.util.ArrayList;
  
public class AlbumRVAdapter extends RecyclerView.Adapter<AlbumRVAdapter.ViewHolder> {
    // creating variables for array list and context
    private ArrayList<AlbumRVModal> albumRVModalArrayList;
    private Context context;
  
    // creating a constructor.
    public AlbumRVAdapter(ArrayList<AlbumRVModal> albumRVModalArrayList, Context context) {
        this.albumRVModalArrayList = albumRVModalArrayList;
        this.context = context;
    }
  
    @NonNull
    @Override
    public AlbumRVAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // inflating layout file on below line.
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.album_rv_item, parent, false);
        return new ViewHolder(view);
    }
  
    @Override
    public void onBindViewHolder(@NonNull AlbumRVAdapter.ViewHolder holder, int position) {
        // setting data to text view and image view on below line.
        AlbumRVModal albumRVModal = albumRVModalArrayList.get(position);
        Picasso.get().load(albumRVModal.imageUrl).into(holder.albumIV);
        holder.albumNameTV.setText(albumRVModal.name);
        holder.albumDetailTV.setText(albumRVModal.artistName);
        // adding click listener for album item on below line.
        holder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // on below line opening a new album detail 
                // activity for displaying songs within that album.