Android Studio Audio Player [Part 1] Setting up the interface

This is a guide on how to build an audio player, using Android Studio.

You can refer to all source codes here: https://github.com/leonardltk/AndroidAudioWaveViewer

The end product should look like this.

The contents are as follows:

1. Setting up the interface.
2. Playing, pausing, resume, stopping an audio.
3. Loading the audio into data array.
4. Plotting the data into a waveplot canvas for visualisation.
5. Enable scrolling of the canvas.
6. Having a slider to show the current wave time.

Setting up the interface.

First, set up an empty activity. Then name it AudioWaveViewer, and make sure you choose at least API 19: Android 4.4, which is required for pausing / resuming animation.

Now, we set up a “res/raw” directory to put our audio file. Create a directory until the res folder, and name it “raw”.

Take a 3 second audio, name it “test.wav” and put it in the newly created folder “AudioWaveViewer\app\src\main\res\raw”.

In the “res/layout” folder, open “activity_main.xml”. This is where you edit the app interface, which determines how your app should look like.

Switch to Split view on the top right of the layout. This is so that you can view the codes and the app interface at the same time.

Delete the default “Hello World” TextView. You also see that it disappears from the code section.

Press run to see the button on the app. At this moment it does not do anything, because we have not done anything to it yet.

Now we are done setting up the interface! Proceed to Part 2 to continue learning how to play, pause, resume, stop an audio.