Audio Recording in Android Example : Building a Voice Recorder App

Voice Recorder  is one of the most basic features of any smartphone and it has been there since and before smartphones came into existence. It is quite a simple utility which enables users to record their voice or any other sound for that matter and the recording gets stored locally and can be listened to any time in the future as per the requirement. So here is an Audio Recording in Android Example.

In this post, we are going to explore how to  implement the voice recording feature in an android application. I hope you’re excited to learn it. So, without any further delay, let’s get started with it.

Creating a new project

  • Go ahead and create a new project by any name that you think is okay for this project.
  • Now, as the files get loaded and the gradle is built, we’ll have activity_main.xml and MainActivity.java
  • MainActivity will be configured as the main recording screen.

Importing images

  • Before proceeding to the coding part, we need certain images in the upcoming screens. So, download the zip of images from below, extract it and move all the images to the drawables directory in your android project without changing their names.

[download id=”5273″ template=”images”]

Editing App Theme

  • If you have seen the output video of this project, then you must have noticed that this project does not use the default action bar. Hence, we need to change the AppTheme to get rid of the default action bar . To do so, go to the values directory in the res directory and there you’ll find the styles.xml file. Update it as shown below.

Importing RecyclerView library

  • We’d be using recyclerView in this project to display the list of recordings. To import it, just copy the dependency given below into the dependencies section of your build.gradle file of your project and sync it.

Getting started with the screeens

  • It’d be a pretty basic app with just two activities. One would have the record button to start the recording and other necessary buttons to stop and save the recording. And the other activity would be where the user would be able to view all the previous recordings and listen to them as well . So, let’s get started with the recording screen.

Recording Screen (MainActivity)

Designing the recording screen(The xml part )

MainActivity is the recording  screen and in it we have a chronometer to be used as a timer when the recording is on, we also have a seekbar,  then we have the play, pause, record and stop buttons to manage the recording procecss.

Below is the code for activity_main.xml. Update your activity_main.xml file with the code below to design your recording screen.

  • In the above screen as the activity is displayed, we’ll see the timer(chronometer) with the record button. The play button and seekbar would remain hidden i.e. their visibility is set to gone before the recording is completed. Once the recording is done and the stop button is hit, the seekbar along with the play button would show up in order to play the currently recorded entry.
  • The layout produced by the above xml code is shown below:-
Audio Recording in Android Example
Audio Recording in Android Example

Setting up the recording process ( The Java Part )

Configuring required permissions in Manifest and in runtime

  • Before proceeding with the code of MainActivity.java , we need to mention certain permissions which are required for this project. To do so, go to AndroidManifest.xml and mention the permissions as shown below:-

  • For marshmallow and above android versions, we need to accept the permissions in the runtime.
  • To do so, go to MainActivity.java file and paste the code of two methods( getPermissionToRecordAudio() and onRequestPermissionsResult() ) given below:-

  • As you paste this code in MainActivity.java file, you shall see some error like shown below:-

Audio Recording in Android Example

  • To resolve this, just copy and the paste the line shown below in MainActivity.java at the top.

  • Now to finally ask permissions in the runtime, call the method  getPermissionToRecordAudio()  in the onCreate()  method  just as shown below:-

  • Now, Run the app and if the device’s android version  is marshmallow and above, you shall see a pop up asking for permissions as shown below:-
Audio Recording in Android Example
Audio Recording in Android Example
  • Now, permissions are perfectly set up
Initializing Views
  • Declare the following references as given below in the MainActivity.java at the top.

  • Next, copy the method initViews  given below in MainActivity.java

  • As you paste intiViews() in MainActivity.java , you shall see an error as shown below:-

Audio Recording in Android Example

  • To resolve this, make MainActivity.java implement View.OnClickListener as shown below:-

Audio Recording in Android Example

 

  • Next, just add the onClick method shown below to MainActivity.java

  • Next, Call the method initViews() in onCreate() below the method getPermissionToRecordAudio() as shown below:-

handling button Clicks

  • We have three imageViews( imageViewPlay, imageViewStop, imageViewRecord ) in this screen(activity_main.xml ) to play, stop and record. It’s time to handle the clicks of these imageViews as the click listener have already been set.
  • To begin with, let’s handle the click of imageViewRecord. To do so,  first import the methods which would be called on the click of imageViewRecord. Copy the code of methods (prepareforRecording(),  startRecording(), stopPlaying() ) given below and paste it in MainActivity.java.

  • As you do, you shall get error just as shown below:-

Audio Recording in Android Example

 

  • To resolve this,  just copy the references given below at the top in the MainActivity.java.

  • In the prepareRecording() method, we just make sure the only the record button is visible and the rest all buttons are hidden.
  • The code of startRecording()  method is quite self explanatory Just follow the comments.
  • In the stopPlaying() method, we just stop the currently playing audio if it’s playing before the recording starts.
  • Now, call the methods prepareRecording() and startRecording()  in the onClick method just as shown below:-

  • Next, we need to set the onClick functionality of imageViewStop to stop the recording.
  •  To do so, just import the methods( preapareforStop() and stopRecording() ) shown below into MainActivity.java

  • In the prepareforStop() method, we just hide the stop button and make the play and record button visible with the seekbar.
  • The code for stopRecording() method is quite self explanatory.
  • Now, call the above methods in the OnClick method as shown below:-

  • Next, we need to set the OnClick functionality of imageViewPlay. To do so, again we need to import certain methods.
  • So, go ahead and import the methods ( startPlaying() and seekUpdation() ) into MainActivity.java as given below:-

  • In startPlaying() method above , we start the timer which progresses as per the recorded audio track. We also call the seekUpdation() method in it so that the seekBar progresses as per the track. It does this by calling a runnable (mentioned in the above code ) periodically in an interval of 100ms . Also, we have set up the OnSeekBarChangeListener for the seekbar so as to  seek the audio track as per the seekbar .
  • To understand the flow of seekBar being updated, refer the image given below along with the code, you’ll get it.

  • To understand how the recording is being played, it’s very simple. You just need to declare the MediaPlayer object  just like we have mPlayer in the MainActivity. It is initialized in the startPlaying method and the data to be played is fed to it through the Uri( fileName contains the path in startPlaying method ) i.e the complete local address to the audio file.
  • Now, just call the methods above in the onClick for the imageViewPlay as shown below:-

  • On the click of imageViewPlay, if the audio is playing, then it shall stopPlaying the audio and vice-versa.
  • Run the app now and you should be able to record, stop and play the recorded audio.

Recording List Screen

  • Create a new activity by the name RecordingListActivity. As the gradle is built and the files get loaded, you’ll have the activity_recording_list.xml and RecordingListActivity.java.

Designing the recording list screen

  • This xml file of this activity will mainly have a recyclerview( to display the list of recordings  ) and a textView ( to show up if there’s no recordings yet ).
  • Update your activity_recording_list.xml file with one shown below :-

Setting up the Recording list screen

  • Since the layout of this activity has a recyclerView, so now we need a model class for a recording and then we need an adapter for recordings.
Creating the model class
  • So, go ahead and create a class by the name Recording.java and copy the code given below into it.

Creating the item layout for recyclerview
  • For recyclerview, we need a layout in order to configure how each item would look in the list. To do so, create a new layout resource file by the name recording_item_layout.xml and copy the xml design given below into it.

  • According to the above xml design, the item will have a play/pause imageview, a textview to display the name of the file and a seekbar to display the progress of the song.
Creating the RecyclerView Adapter
  • Go ahead and create a class by the name RecordingAdapter and copy the code given below:-

  • Go through the adapter code above and if you have implemented RecyclerView before , then you must have noticed that nothing has been done in the adapter yet. If you’re finding it diffcult to implement RecyclerView, then go through the tutorial for recyclerView in the link given below and then come back.

Android RecyclerView and CardView Tutorial

  • Now update the ViewHolder class in the adapter as shown below.

  • In the above code, we just declared and initialized objects for the ui elements in the recording_item_layout.xml and some other variables which would be used later in this post. Then, we imported a list of methods which are quite self explanatory but still I’ll try add something to it. The list of method in the ViewHolder class is as follows:-
  1. manageSeekBar()- It’s purpose is to move the track as per the progress of the seekBar. For instance, if the seekBar is seeked to certain position, then the track is moved to that point accordingly and that’s what is done in this method. It’s no magic anyway. It just has OnSeekBarChangeListener.
  2. markAllPaused()- As the name suggests, it simply pauses all the audios in the list. This method is called when some audio is being played and then some other audio is tapped to play.
  3. seekUpdation()- Now you must be familiar with this method because we used it in the previous activity for the purpose of updating seekbar as the track progresses.
  4. startPlaying() and stopPlaying() – Of course, we used them too in the previous activity and you also know what they do.
  • Next, we need to set an onClick listener to the imageViewPlay in the recording_item_layout.xml file. To do so, copy the code given below to the constructor of the ViewHolder class.

  • Final ViewHolder class is here below.

Configuring onBindViewHolder
  • To give a final touch to this adapter we just need to set up the OnBindViewHolder method. To do so, import the method shown below in the RecordingAdapter.java class.

  • In the above code, we set the data to items as per their position. Now call this method in the OnBindViewHolder just as shown below:-

Audio Recording in Android Example

  • Now the adapter is complete and I know you’re struggling to understand the flow of the adapter. Never mind . I’ll try to simplify it in the later course of the post.
  • Here’s the final code of RecordingAdapter.java

Configuring the RecordingListActivity.java
  • In this class, our sole aim is to fetch the Recordings from the storage, parse it in the form of ArrayList and hence set Adapter to recyclerView.
  • Now to begin with, just copy the object declarations given below to the RecordingListActivity.java at the top.

  • Next, import the method initViews() from below in the RecordingListActivity.java  to initialize the views in activity_recording_list.xml.

  • Now call the above method in onCreateMethod as shown below:-

  • Now import the method ( fetchRecordings())  in which all the recordings would be fetched and data would be parsed into ArrayList and also the method( setAdaptertoRecyclerView() ) in which the adapter is being set to the recyclerView.
  • Here is the code for  fetchRecordings():-

  • Here is the code for setAdaptertoRecyclerView():-

  • Next, just call the method fetchRecordings() in onCreate method below initViews just as shown below:-

  • Recording list screen is almost complete. We just need to set the action of the back button in the toolbar. To do so, copy the method given below to the RecordingListActivity.java file
  • Here’s the final code for RecordingListActivity.java.

  • That’s it. The recording list activity is all set. We just need to hook it to the MainActivity.java. We’ll do it by using options menu in MainActivity on click of which it shall go to recordinglist activity.
  • To do so, in the res folder, create a diretory by the name menu. Now in the menu folder, create a menu resource file of the name list_menu.xml and copy the xml from below into it.:-

  • Now, go to MainActivity.java and  import the methods given below. These methods will initialize options menu and handle the click actions.

  • Here’s the final code for MainActivity.java

  • Now run the app and you  shall see an option by the name List in the top right corner as shown below:-
Audio Recording in Android Example
Audio Recording in Android Example
  • Click on the LIST option and it shall take you to the RecordingListActivity as shown below:-
Audio Recording in Android Example
Audio Recording in Android Example
  • Hit the play button on any item and the audio shall begin to play. That’s it. Your voice recorder app is all set.
  • Hurrah! You made your own voice recorder app.
  • If you’re interested in understanding the flow in RecordingAdapter, then continue reading the post.

Understanding the flow in RecordingAdapter

  • Alright, in the Recording.java model class, we have the three parameters viz. Uri, name and isPlaying . Uri contains the path of audio file, name is simply the name of the audio file and isPlaying is to check if it is being played currently or not.
  • Now in the setUpdata() method in the adapter, we check if the current item is being played. If it is being played, then the button in the form of imageview is set to be a pause button and vice versa. If it is playing currently, then we also call the seekUpdation() method in the ViewHolder so as to update the seekbar as per the progress of the audio file being played. Also, we call the method manageSeekbar in ViewHolder which moves the track being played as per the seekbar’s progress.
  • Look into the constructor of the ViewHolder class in RecordingAdapter and you shall see OnClick listener has been set to the imageViewPlay. In the onClick method, we get position of item clicked so as to get the Uri which is further used to play it. Now here, we use a boolean by the name isPlaying which is global variable in the class ViewHolder. If any audio is being played, global isPlaying is true and vice versa. Similary, a global variable by the name last_index has been maintained which contains the index of the last item played.
  • Consider an audio file having certain position in Arraylist is already playing and hence it’s positon will be copied to last_index. If now imageViewPlay which is now a pause button for this audio file is hit, it’ll go to the onClick method. In the onClick method, isPlaying would be true and also position== last_index and hence the playing will simply stop. If the position would have been different from last_index, then that would have been the case of clicking some other item. In that case too, the audio is stopped but it is to be updated in the data so that the imageViewplay again becomes a play button. To do so, we have the markAllPaused() in which we run a loop and mark isPlaying for all the items set to false. Thence, the recording which was clicked is played.
  • I hope  you got the point what I tried to explain here. If not, feel free to ping me in the comments.
  • Looking for source code? Find it in the link below.

So thats all for this Audio Recording in Android Example. I hope you found it useful, and if you think it is useful then please give us a SHARE. Thank You 🙂

12 thoughts on “Audio Recording in Android Example : Building a Voice Recorder App”

  1. Hi Manish, excellent tutorial.

    I was wondering if you could extend this demo further by allowing users to upload these recordings to firebase?

    If not, could you please suggest the steps required to do this?

    Reply
  2. i am getting error in RecordingAdapter.java class.
    in this line “private Handler mHandler = new Handler();” as ‘Handler’ is abstract; can not be instantiated.
    and in this line “mHandler.postDelayed(runnable, 100);” as cannot resolve method ‘postDelayed(java.lang.runnable,int)

    please guide me about these errors
    thanks

    Reply
  3. hi manish,

    Firstly thanks for this awesome tutorial, but here i have small requirement is stop recording when time reached to 29 sec can you please help me….

    Thanks

    Reply
  4. Hi
    I just implemented above codes but I confronted two errors :
    startRecording Method & mrecorder.start within startRecording Method

    How can I solve them?
    plz answer it sooner.
    appreciate it

    Reply

Leave a Comment