How to Make a Simple Media Player for Android

People ask me all the time how to develop an Android program that can load up and play music. Sadly, there are not a lot of good answers on the internet. The good news is, it's really not all that bad. Today we are going to:

1. Learn how to implement features of the android.media.MediaPlayer class.
2. Load Drawables on the fly from the SD card using the createFromPath() function
3. Learn what assets are and how to incorporate these into our program
4. Learn how to load media from an SD card
5. Write a fully functional Media Player program
6. Become a better Java Monkey!

By the end of this tutorial, you will not only have a fully functional simple media player, but you will also have a clear understanding of how to incorporate media into your apps. Before going any further, make sure your development environment is set up correctly for Android development. If you are unsure, check my guide here.

*** I recommend you download the source code for this project here, as it contains sample tracks and all of the drawables you will need, as well as a cheesy icon I made myself ***

When making a media player, a few things come to mind:

1. There will be multiple tracks to load
2. Moving from track to track
3. Play, Pause, and Stop functionality
4. Shuffle and Loop functionality
5. The SD Card must be mounted by the phone in order to load music/pictures from it

Doesn't sound too hard right? So let's begin:

1. Create a new project File > New > Android Project
2. Name it MyMediaPlayer
3. Set the MinSdk to 3 and the TargetSdk to 8
4. Name your package
5. Eclipse will create the onCreate Activity for you (e.g. 'MyMediaPlayerActivity.java' ) If you want to name it something else, go ahead; it won't hurt anything.

If you have downloaded the source for this project and want to simply import it:

1. Make sure that the MyMediaPlayer project is in the "Eclipse Projects" folder
2. File > Import > Existing Projects into Workspace
3. Browse > MyMediaPlayer > OK
4. Make sure the checkbox in the "Projects:" box is checked > Finish

Now let's take a look at the manifest file.

As you can see, the manifest acts like a parental guardian for your App. It is responsible for supplying the versionCode, which is important when uploading applications to the Android Market. It also determines how and when activities can be launched via intent filters. The manifest is also where you specify certain permissions such as internet access. For example, in MyMediaPlayer, we use the WAKE_LOCK permission so that we can keep the phone on while the app is running. Otherwise, the song would pause itself after 20 seconds or so. Without the permission specified in the manifest, the application would crash upon loading because it attempted to utilize a wake lock without permission.

The Android Manifest is an important XML document, so familiarize yourself with it. Eclipse will generate a manifest file for you when creating a new project, so if you created this project from scratch, the only line you would have to add would be the "uses-permission" for the WAKE_LOCK

Alright, while on the topic of XML documents, let's take a look at our main layout. After this we will get to the Java code I promise!

If you are unfamilar with XML, at first glance this code might look very confusing. I assure you it is very simple, and is one of the greatest features of Android. If you are coming into Android Development from a Java Swing background, you will be happy to know that you can completely separate your layout/gui elements from your main code by setting it up in an XMLdocument.

In the MyMediaPlayer program, we use a Relative Layout with Linear Layouts nested inside. The Relative Layout allows us to specify where the Linear Layouts are placed in relation to each other. The topmost Linear Layout is used for the album art. We use the android:layout_alignParentTop="true" and android:layout_alignParentLeft="true" to specify that the album art layout is aligned to the topleft corner of the screen. We use layout_weight to dictate that the layout containing the image takes up 6/7 of the screen, with the remaining 1/7 for the buttons. Speaking of buttons, in each of the buttons there is android:onClick="click". This means that when you click on any of these buttons, they call a function called click in MyMediaPlayerActivity.java, which we will get to in a bit.

The best way to learn Android layouts is to simply play around with one that works. Adjust settings and values and notice the changes. Parent/Child relationships can get very complicated, so it is best to just take it one step at a time. There is a nice Tool online that generates an XML layout based on what you drag-and-drop onto the screen. If you think this tool may help you with Android Layouts, click here to download it!

Alright, Let's dive into some java code!

Alright, if you gave the above code a good scan, you probably noticed that Music.java is responsible for instantiating our media player and controlling it. It implements the OnCompletionListener so that we can monitor when a song is finished playing. The reason we do all of this in a separate class is because we will instantiate it every time we seek to a different track, rather than trying to load all of the tracks into memory.

Whenever you feel comfortable with the Music class, let's move on to the main attraction, MyMediaPlayerActivity.java

Before we discuss the onCreate activity, let's talk about our Class Level variables.

First, we have our wakeLock, which if you recall from earlier is used to keep the phone on. We also have our EXTENSIONS array, which is used to validate that the files we load into our program are actual sound files. The trackNames ArrayList is used to store all of the track names in memory for reference by the media player. The trackArtworks ArrayList matches the trackNames List except it does not contain any extensions. It is used when trying to find a picture with the same name as the track currently playing and if so load that image. The assets are used to retrieve a list of all the files in the 'assets' folder of your program. Assets are the resources that get compiled along with your program. I've included 4 tracks in the source of this program below. The program by default loads up the assets folder. By pressing the MENU button on your phone and then clicking the SOURCE option you can specify the program to load tracks from the 'music' folder on the root of your SD card. The rest of the variables are pretty self explanatory and if not I've included inline comments.

These functions override their parent counterparts from Activity class. They are important because they handle the Activity Lifecycle. Lines 4-8 set up full-screen mode and a wakeLock to insure that the phone screen does not turn off (which would result in an onPause event). On Line 9 we set the content view to the layout we created above, meaning we will have an ImageView and 3 Buttons on the screen. The last thing we do in onCreate is call initialize(0). The 0 in the parentheses means that the media player will load files from the program's assets upon load. Change it to a 1 to load from the SD Card upon load. We will look at the initialize method in the next code block.

The onResume method is where we will acquire the wakeLock. We do this in onResume because we release it in the onPause method. If we were to acquire the wakeLock in the onCreate method, it would only be done so once.

The onPause method is fired when the program is interrupted. For example, the phone is receiving a phone call or the user presses the HOME button. To prepare for something like this, we override the onPause method from Activity. If track is not null and it is playing it gets paused and the pause button gets turned into a play button. We could have also chosen to override onStop, but the isFinishing method serves the same purpose. If the program is finishing, we dispose the mediaplayer object and call the Activity's finish() method.

The initialize method initializes all of our variables so that we do not end up getting null pointer exceptions. The bottom of the method adds all of the tracks from either the compiled assets or from "scard/music", making sure to only add tracks with a valid extension ( e.g. ".mp3", ".mid" ) After that, the loadTrack() method is called.

The loadTrack() method will be called everytime a new track has been selected. In the loadTrack() method, we call loadMusic() and setImage(), which we will take a look at below.

The loadMusic is probably the most important method in the entire program. You will want to learn the Music.java class and this method because they can translate to any program that needs music, not just a media player.

In our loadMusic() method, we either load up a track from our compiled assets (the ones I include with the download above) or one of your songs located in the "music" folder on your SD Card.

The setImage() method is called immediately the loadMusic() method to change the album art accordingly. In our simple example, it simply scans the "pictures" folder on your SD Card for a picture with same name as the track currently playing excluding the extension and sets it accordingly. If no image can be found, a default image is loaded up from the drawable folder of your project.

Alright, I know we have covered a lot of ground here, but we are almost done. The next two sections cover the user input.

First off, we must override a functon called onCreateOptionsMenu(). It is called whenever the Menu Button is pressed on your phone. It is particularly useful if there are extra controls you want to provide to your users without having to clutter the screen with additional buttons. In our onCreateOptionsMenu() method, we call a createMenu() method.

The createMenu() method is responsible for setting populating the menu options. We have 4 menu options in total: "Looping", "Shuffle", "Stop", and "Source"

The onOptionsItemSelected() method provides functionality for these menu options. We use a switch on the item.getItemId() function, which returns an int that distinguishes the options from each other. The "Looping" and "Stop" Options seem pretty self explanatory, so I won't go over those.

When the "Shuffle" Option is clicked, the setShuffle() method is called, which sets shuffle to to either true of false and displays a message for confirmation.

When the "Source" Option is clicked, type is switched from 0 to 1 and vice versa and the initialize() method is called again, except this time with the new type. If the type is set to 1, the SD Card will be loaded up instead of the "assets" folder of your project.

Alright, let's move on to the on-screen controls!

If you recall from earlier when we created our main.xml layout, we talked about the android:onClick="click" in each of the buttons. The click function must be public, have a return type of void, and accept a View instance as a parameter; otherwise you will receive errors. Since all of the buttons call the same function, how do we know which button called it? We set up a switch on the view.getId() function, which returns the id of the button. The Next and Previous Buttons simply call the setTrack() method, the loadTrack() method we discussed earlier, and then the playTrack() method, which plays the newly loaded song if the user was playing the last song.

The setTrack() method moves the currentTrack index either forward or backward. If shuffle is on, then currentTrack index becomes a random number not equal to what it was before the method call.

The playTrack() method simply calls the play() method from Music.java, provided that track is not null.

Did I forget anything? I think that's about it, if you have been following along and creating your project from scratch, make sure you do not have any pesky red underlines in your code. At this point, we can go ahead and run our program. You can either click Run > Run As > Android Application or right-click your project and Run As > Android Application

Well? Do the Buttons work? How about the Menu Options? Try alternating between Loop and Shuffle Mode. Click the Source button to load up your SD Card, but make sure you disconnect your phone from the PC first!

You now have a working custom media player for your Android Device! The program works decently, but there is more to be desired isn't there? If you wanted to publish this it most likely would not perform well on the Market, as there are much better media players available. To make this media player better, you could add a thread that constantly checks if the onCompletionListener event is satisfied and if so go to the next song. Or you could stream album art from a locally stored database instead of relying on the "pictures" folder of the SD card. Animating visualizations would be nice too wouldn't they? The possibilities are endless! As an Android Developer, these choices are entirely yours, so experiment and try new things!

*** If you had any problems with this tutorial, get the source code here and take a look at it. Play around with the code and understand how it all works together. Good Luck! ***

You can comment this page below and I will respond as quickly as possible.

If you enjoyed this tutorial or it helped you in a project you were working on, consider checking out my game on the Android Market by scanning the QR code on the right -->