How to build a simple music player app using Android Studio - GeeksforGeeks

22 May, 2020
This is a very simple app suitable for beginners to learn the concepts. The following pre-requisites is good enough before starting.
Android fundamentals for beginners
Install and Set up Android Studio
First android app project
How to Run your first Android app
The following things you will learn in this article:
Implementing MediaPlayer class and using its methods like pause, play and stop.
Using external files(images, audios, etc) in our project.
Building the interface of our Music Player Android App.
After finishing all the following subsequent steps our app will look like this:
Step 1: Open a new android projectAfter opening the Android Studio you have to create a new project using the Empty Activity with language as Java and give your project a unique name as you wish but don’t forget to keep the first alphabet capital.
Go to the top left corner and then hit File->New->New Project as shown in the following screenshot.Select Empty Activity as shown in the following screenshot.Give your project a name, choose java and use lower level API so that your app can run on older version of android phones(I am using Api 16: Android 4.1 Jelly Bean).Step 2: Designing the User Interface of the appIn this app, we have used 4 components:a imageView– to show our given image for the song3 Buttons:a play button to play our songa pause button to pause our songa stop button to stop our song(Note: if we press play after pressing the pause then our song will continue playing immediately after where it was paused but if we press play button after stop then our song will play from the beginning)These components are implemented on the below two layouts:Vertical LinearLayoutHorizontal LinearLayoutInside the LinearLayout (vertical) there are two components:imageView componentLinearLayout(horizontal)This layout will vertically divide our app screen in two halves. The imageView component will be on upper half and the Horizontal Linear Layout will be on the lower half. The horizontal layout will contain three buttons (play, pause and stop button). This horizontal layout will align these three buttons one after another horizontally on the lower half of our app screen.To understand this clearly, please go through the following blue print and Component Tree of our app:In our app I have used different styles for play, pause and stop button by adding the following line of code:android:background=”@android:drawable/ic_media_play” for play buttonandroid:background=”@android:drawable/ic_media_pause” for pause buttonandroid:background=”@android:drawable/ic_delete” for stop buttonHere geeksforgeeks logo is used in the app. Select the image and then paste it in the drawable directory. The path of the directory:project->app->src->main->res->drawableSet the id of all components and add the onClick methods with the buttons. Below is the XML code for the activity_main.xml file.<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@color/colorPrimary"    android:orientation="vertical"    android:theme="@style/Theme.AppCompat"    tools:context=".MainActivity">      <ImageView        android:id="@+id/imageView"        android:layout_width="match_parent"        android:layout_height="430dp"        android:background="@drawable/download"        android:contentDescription="@string/todo" />      <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_margin="20dp"        android:background="@color/colorAccent"        android:orientation="horizontal"        android:padding="10dp">          <Button            android:id="@+id/pause"            style="@style/Widget.AppCompat.Button.Borderless.Colored"            android:layout_width="125dp"            android:layout_height="match_parent"            android:background="@android:drawable/ic_media_pause"            android:onClick="musicpause" />          <Button            android:id="@+id/start"            style="@style/Widget.AppCompat.Button.Borderless"            android:layout_width="125dp"            android:layout_height="match_parent"            android:background="@android:drawable/ic_media_play"            android:onClick="musicplay" />          <Button            android:id="@+id/stop"            style="@style/Widget.AppCompat.Button.Borderless"            android:layout_width="125dp"            android:layout_height="match_parent"            android:background="@android:drawable/ic_delete"            android:onClick="musicstop" />    </LinearLayout></LinearLayout>Step 3: Adding the music file to our appAdd the mp3 file to the raw folder. You can reach there by:app-> res-> rawIf there is no raw folder, then create it by right-clicking on res directory then:res-> new-> directoryName the newly created directory as raw and add all the audio files in this folder. Drag and drop files here is not allowed. You have to copy your source file, then right-click on the raw directory and click paste. Use “show in explorer” (if you are using windows) to go to that particular file. Make sure that the new name contains all small alphabets. The only valid characters are (a-z and 0-9 and _ )Step 4: Let’s code the functionality of our AppMake a object of MediaPlayer class named music. It is an inbuilt class in android package. All the properties of the MediaPlayer class can be used by this music object:MediaPlayer musicWe will add our music file to this newly created object by using create function :music = MediaPlayer.create(this, R.raw.sound);Please note that there is no need to add .mp3 or .wav or whatever filetype you are using. Just add the name of the file. (I have named my file as sound.mp3 so used R.raw.sound)MediaPlayer class has an inbuilt function called start we will use this function for play button. It will start the song.public void playSong(View v){music.start();}For pause button we will use the inbuilt function pause. This will pause the song.public void pauseSong(View v) {mp.pause();}For stop button we will use the inbuilt stop function. This function also deletes the object (music), so we create a new object with the same name.public void stopSong(View v) {mp.stop();}music = MediaPlayer.create(this, R.raw.sound);Note: The audio files are stored in the app, so make sure small files are addedThe complete Java code: MainActivity.java filepackage com.example.amusinz;  import android.media.MediaPlayer;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;  public class MainActivity    extends AppCompatActivity {      // Instantiating the MediaPlayer class    MediaPlayer music;      @Override    protected void onCreate(        Bundle savedInstanceState)    {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);          // Adding the music file to our        // newly created object music        music = MediaPlayer.create(            this, R.raw.sound);    }      // Plaing the music    public void musicplay(View v)    {        music.start();    }      // Pausing the music    public void musicpause(View v)    {        music.pause();    }      // Stoping the music    public void musicstop(View v)    {        music.stop();        music            = MediaPlayer.create(                this, R.raw.sound);    }}Step 5: Let’s Run our appClick the “Run” button at the Toolbar at the top to run our code.You can run your app two ways:using Android Virtual Device (emulator)by connecting your phone using USBYou must enable the developer options in your phone and set the USB debugging mode on to run your app.Please note that the emulator consumes a lot of RAM so your system should have enough ram to launch the emulator, it is recommended to use 4gb or more ram to increase the performance of your emulator.Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!My Personal Notes
arrow_drop_upSave
Go to the top left corner and then hit File->New->New Project as shown in the following screenshot.
Select Empty Activity as shown in the following screenshot.
Give your project a name, choose java and use lower level API so that your app can run on older version of android phones(I am using Api 16: Android 4.1 Jelly Bean).Step 2: Designing the User Interface of the appIn this app, we have used 4 components:a imageView– to show our given image for the song3 Buttons:a play button to play our songa pause button to pause our songa stop button to stop our song(Note: if we press play after pressing the pause then our song will continue playing immediately after where it was paused but if we press play button after stop then our song will play from the beginning)These components are implemented on the below two layouts:Vertical LinearLayoutHorizontal LinearLayoutInside the LinearLayout (vertical) there are two components:imageView componentLinearLayout(horizontal)This layout will vertically divide our app screen in two halves. The imageView component will be on upper half and the Horizontal Linear Layout will be on the lower half. The horizontal layout will contain three buttons (play, pause and stop button). This horizontal layout will align these three buttons one after another horizontally on the lower half of our app screen.To understand this clearly, please go through the following blue print and Component Tree of our app:In our app I have used different styles for play, pause and stop button by adding the following line of code:android:background=”@android:drawable/ic_media_play” for play buttonandroid:background=”@android:drawable/ic_media_pause” for pause buttonandroid:background=”@android:drawable/ic_delete” for stop buttonHere geeksforgeeks logo is used in the app. Select the image and then paste it in the drawable directory. The path of the directory:project->app->src->main->res->drawableSet the id of all components and add the onClick methods with the buttons. Below is the XML code for the activity_main.xml file.<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@color/colorPrimary"    android:orientation="vertical"    android:theme="@style/Theme.AppCompat"    tools:context=".MainActivity">      <ImageView        android:id="@+id/imageView"        android:layout_width="match_parent"        android:layout_height="430dp"        android:background="@drawable/download"        android:contentDescription="@string/todo" />      <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_margin="20dp"        android:background="@color/colorAccent"        android:orientation="horizontal"        android:padding="10dp">          <Button            android:id="@+id/pause"            style="@style/Widget.AppCompat.Button.Borderless.Colored"            android:layout_width="125dp"            android:layout_height="match_parent"            android:background="@android:drawable/ic_media_pause"            android:onClick="musicpause" />          <Button            android:id="@+id/start"            style="@style/Widget.AppCompat.Button.Borderless"            android:layout_width="125dp"            android:layout_height="match_parent"            android:background="@android:drawable/ic_media_play"            android:onClick="musicplay" />          <Button            android:id="@+id/stop"            style="@style/Widget.AppCompat.Button.Borderless"            android:layout_width="125dp"            android:layout_height="match_parent"            android:background="@android:drawable/ic_delete"            android:onClick="musicstop" />    </LinearLayout></LinearLayout>Step 3: Adding the music file to our appAdd the mp3 file to the raw folder. You can reach there by:app-> res-> rawIf there is no raw folder, then create it by right-clicking on res directory then:res-> new-> directoryName the newly created directory as raw and add all the audio files in this folder. Drag and drop files here is not allowed. You have to copy your source file, then right-click on the raw directory and click paste. Use “show in explorer” (if you are using windows) to go to that particular file. Make sure that the new name contains all small alphabets. The only valid characters are (a-z and 0-9 and _ )Step 4: Let’s code the functionality of our AppMake a object of MediaPlayer class named music. It is an inbuilt class in android package. All the properties of the MediaPlayer class can be used by this music object:MediaPlayer musicWe will add our music file to this newly created object by using create function :music = MediaPlayer.create(this, R.raw.sound);Please note that there is no need to add .mp3 or .wav or whatever filetype you are using. Just add the name of the file. (I have named my file as sound.mp3 so used R.raw.sound)MediaPlayer class has an inbuilt function called start we will use this function for play button. It will start the song.public void playSong(View v){music.start();}For pause button we will use the inbuilt function pause. This will pause the song.public void pauseSong(View v) {mp.pause();}For stop button we will use the inbuilt stop function. This function also deletes the object (music), so we create a new object with the same name.public void stopSong(View v) {mp.stop();}music = MediaPlayer.create(this, R.raw.sound);Note: The audio files are stored in the app, so make sure small files are addedThe complete Java code: MainActivity.java filepackage com.example.amusinz;  import android.media.MediaPlayer;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;  public class MainActivity    extends AppCompatActivity {      // Instantiating the MediaPlayer class    MediaPlayer music;      @Override    protected void onCreate(        Bundle savedInstanceState)    {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);          // Adding the music file to our        // newly created object music        music = MediaPlayer.create(            this, R.raw.sound);    }      // Plaing the music    public void musicplay(View v)    {        music.start();    }      // Pausing the music    public void musicpause(View v)    {        music.pause();    }      // Stoping the music    public void musicstop(View v)    {        music.stop();        music            = MediaPlayer.create(                this, R.raw.sound);    }}Step 5: Let’s Run our appClick the “Run” button at the Toolbar at the top to run our code.You can run your app two ways:using Android Virtual Device (emulator)by connecting your phone using USBYou must enable the developer options in your phone and set the USB debugging mode on to run your app.Please note that the emulator consumes a lot of RAM so your system should have enough ram to launch the emulator, it is recommended to use 4gb or more ram to increase the performance of your emulator.Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!My Personal Notes
arrow_drop_upSave
Step 2: Designing the User Interface of the appIn this app, we have used 4 components:
a imageView– to show our given image for the song
3 Buttons:a play button to play our songa pause button to pause our songa stop button to stop our song
a play button to play our song
a pause button to pause our song
a stop button to stop our song
(Note: if we press play after pressing the pause then our song will continue playing immediately after where it was paused but if we press play button after stop then our song will play from the beginning)
These components are implemented on the below two layouts:
Vertical LinearLayout
Horizontal LinearLayout
Inside the LinearLayout (vertical) there are two components:
imageView component
LinearLayout(horizontal)
This layout will vertically divide our app screen in two halves. The imageView component will be on upper half and the Horizontal Linear Layout will be on the lower half. The horizontal layout will contain three buttons (play, pause and stop button). This horizontal layout will align these three buttons one after another horizontally on the lower half of our app screen.To understand this clearly, please go through the following blue print and Component Tree of our app:
In our app I have used different styles for play, pause and stop button by adding the following line of code:
android:background=”@android:drawable/ic_media_play” for play buttonandroid:background=”@android:drawable/ic_media_pause” for pause buttonandroid:background=”@android:drawable/ic_delete” for stop button
Here geeksforgeeks logo is used in the app. Select the image and then paste it in the drawable directory. The path of the directory:
project->app->src->main->res->drawable
Set the id of all components and add the onClick methods with the buttons. Below is the XML code for the activity_main.xml file.
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@color/colorPrimary"    android:orientation="vertical"    android:theme="@style/Theme.AppCompat"    tools:context=".MainActivity">      <ImageView        android:id="@+id/imageView"        android:layout_width="match_parent"        android:layout_height="430dp"        android:background="@drawable/download"        android:contentDescription="@string/todo" />      <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_margin="20dp"        android:background="@color/colorAccent"        android:orientation="horizontal"        android:padding="10dp">          <Button            android:id="@+id/pause"            style="@style/Widget.AppCompat.Button.Borderless.Colored"            android:layout_width="125dp"            android:layout_height="match_parent"            android:background="@android:drawable/ic_media_pause"            android:onClick="musicpause" />          <Button            android:id="@+id/start"            style="@style/Widget.AppCompat.Button.Borderless"            android:layout_width="125dp"            android:layout_height="match_parent"            android:background="@android:drawable/ic_media_play"            android:onClick="musicplay" />          <Button            android:id="@+id/stop"            style="@style/Widget.AppCompat.Button.Borderless"            android:layout_width="125dp"            android:layout_height="match_parent"            android:background="@android:drawable/ic_delete"            android:onClick="musicstop" />    </LinearLayout></LinearLayout>
Step 3: Adding the music file to our appAdd the mp3 file to the raw folder. You can reach there by:
app-> res-> raw
If there is no raw folder, then create it by right-clicking on res directory then:
res-> new-> directory
Name the newly created directory as raw and add all the audio files in this folder. Drag and drop files here is not allowed. You have to copy your source file, then right-click on the raw directory and click paste. Use “show in explorer” (if you are using windows) to go to that particular file. Make sure that the new name contains all small alphabets. The only valid characters are (a-z and 0-9 and _ )
Step 4: Let’s code the functionality of our App
Make a object of MediaPlayer class named music. It is an inbuilt class in android package. All the properties of the MediaPlayer class can be used by this music object:MediaPlayer musicWe will add our music file to this newly created object by using create function :music = MediaPlayer.create(this, R.raw.sound);Please note that there is no need to add .mp3 or .wav or whatever filetype you are using. Just add the name of the file. (I have named my file as sound.mp3 so used R.raw.sound)MediaPlayer class has an inbuilt function called start we will use this function for play button. It will start the song.public void playSong(View v){music.start();}For pause button we will use the inbuilt function pause. This will pause the song.public void pauseSong(View v) {mp.pause();}For stop button we will use the inbuilt stop function. This function also deletes the object (music), so we create a new object with the same name.public void stopSong(View v) {mp.stop();}music = MediaPlayer.create(this, R.raw.sound);Note: The audio files are stored in the app, so make sure small files are addedThe complete Java code: MainActivity.java filepackage com.example.amusinz;  import android.media.MediaPlayer;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;  public class MainActivity    extends AppCompatActivity {      // Instantiating the MediaPlayer class    MediaPlayer music;      @Override    protected void onCreate(        Bundle savedInstanceState)    {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);          // Adding the music file to our        // newly created object music        music = MediaPlayer.create(            this, R.raw.sound);    }      // Plaing the music    public void musicplay(View v)    {        music.start();    }      // Pausing the music    public void musicpause(View v)    {        music.pause();    }      // Stoping the music    public void musicstop(View v)    {        music.stop();        music            = MediaPlayer.create(                this, R.raw.sound);    }}Step 5: Let’s Run our appClick the “Run” button at the Toolbar at the top to run our code.You can run your app two ways:using Android Virtual Device (emulator)by connecting your phone using USBYou must enable the developer options in your phone and set the USB debugging mode on to run your app.Please note that the emulator consumes a lot of RAM so your system should have enough ram to launch the emulator, it is recommended to use 4gb or more ram to increase the performance of your emulator.Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!My Personal Notes
arrow_drop_upSave
Make a object of MediaPlayer class named music. It is an inbuilt class in android package. All the properties of the MediaPlayer class can be used by this music object:MediaPlayer music
MediaPlayer music
We will add our music file to this newly created object by using create function :music = MediaPlayer.create(this, R.raw.sound);Please note that there is no need to add .mp3 or .wav or whatever filetype you are using. Just add the name of the file. (I have named my file as sound.mp3 so used R.raw.sound)
music = MediaPlayer.create(this, R.raw.sound);
Please note that there is no need to add .mp3 or .wav or whatever filetype you are using. Just add the name of the file. (I have named my file as sound.mp3 so used R.raw.sound)
MediaPlayer class has an inbuilt function called start we will use this function for play button. It will start the song.public void playSong(View v){music.start();}
public void playSong(View v){music.start();}
For pause button we will use the inbuilt function pause. This will pause the song.public void pauseSong(View v) {mp.pause();}
public void pauseSong(View v) {mp.pause();}
For stop button we will use the inbuilt stop function. This function also deletes the object (music), so we create a new object with the same name.public void stopSong(View v) {mp.stop();}music = MediaPlayer.create(this, R.raw.sound);Note: The audio files are stored in the app, so make sure small files are addedThe complete Java code: MainActivity.java filepackage com.example.amusinz;  import android.media.MediaPlayer;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;  public class MainActivity    extends AppCompatActivity {      // Instantiating the MediaPlayer class    MediaPlayer music;      @Override    protected void onCreate(        Bundle savedInstanceState)    {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);          // Adding the music file to our        // newly created object music        music = MediaPlayer.create(            this, R.raw.sound);    }      // Plaing the music    public void musicplay(View v)    {        music.start();    }      // Pausing the music    public void musicpause(View v)    {        music.pause();    }      // Stoping the music    public void musicstop(View v)    {        music.stop();        music            = MediaPlayer.create(                this, R.raw.sound);    }}Step 5: Let’s Run our appClick the “Run” button at the Toolbar at the top to run our code.You can run your app two ways:using Android Virtual Device (emulator)by connecting your phone using USBYou must enable the developer options in your phone and set the USB debugging mode on to run your app.Please note that the emulator consumes a lot of RAM so your system should have enough ram to launch the emulator, it is recommended to use 4gb or more ram to increase the performance of your emulator.Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!My Personal Notes
arrow_drop_upSave
public void stopSong(View v) {mp.stop();}
music = MediaPlayer.create(this, R.raw.sound);
Note: The audio files are stored in the app, so make sure small files are added
The complete Java code: MainActivity.java file
package com.example.amusinz;  import android.media.MediaPlayer;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;  public class MainActivity    extends AppCompatActivity {      // Instantiating the MediaPlayer class    MediaPlayer music;      @Override    protected void onCreate(        Bundle savedInstanceState)    {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);          // Adding the music file to our        // newly created object music        music = MediaPlayer.create(            this, R.raw.sound);    }      // Plaing the music    public void musicplay(View v)    {        music.start();    }      // Pausing the music    public void musicpause(View v)    {        music.pause();    }      // Stoping the music    public void musicstop(View v)    {        music.stop();        music            = MediaPlayer.create(                this, R.raw.sound);    }}
Step 5: Let’s Run our appClick the “Run” button at the Toolbar at the top to run our code.You can run your app two ways:
using Android Virtual Device (emulator)
by connecting your phone using USB
You must enable the developer options in your phone and set the USB debugging mode on to run your app.Please note that the emulator consumes a lot of RAM so your system should have enough ram to launch the emulator, it is recommended to use 4gb or more ram to increase the performance of your emulator.
android
Articles
Java
Write From Home
Java
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to write a Pseudo Code?
Analysis of Algorithms | Set 1 (Asymptotic Analysis)
SQL Interview Questions
Understanding "extern" keyword in C
Mutex vs Semaphore
Arrays in Java
Split() String method in Java with examples
For-each loop in Java
Object Oriented Programming (OOPs) Concept in Java
HashMap in Java with Examples