Create Music Player app in Sketchware

To create a Music Player app in sketchware, follow the steps given below.

1. Create a new project in Sketchware.

2. In VIEW area on main.xml, add a ListView listview1 with height wrap_content, and weight 1. Add a SeekBar seekbar1, an ImageView imageview1, and three TextViews textview1, textview2, and textview3, as shown in the image below.

3. Create a CustomView mycustom.xml and add a TextView textview1, and an ImageView imageview1 in it. For listview1 select mycustom.xml as it's customView.

4. Add a MediaPlayer component mp, a Shared Preferences component sp:sp and a Timer component timer.

5. Create six More Blocks MPcreate(pos), MPstart, and MPpause for the MediaPlayer and searchFolders, getFileList in [filePath] and extra.

6. Add three number variables n, r and songPosition, and five String variables currentfile, songMinutes, songSeconds, folder, folderName.

Also add a List String folderList, List String fileList and a List Map allmusic.

7. In onCreate event, use blocks as shown in image below.

Here we perform following actions:
i. Make imageview1 and progressbar1 GONE.
ii. Set songPosition to -1.
iii. If the shared preferences key "allsongs" is empty, call the AsyncTask GetSongsTask using following code:
(new GetSongsTask()).execute();
iv. If the shared preferences key "allsongs" is not empty, get all data from shared preferences sp key "allsongs" and convert to List Map allmusic. Display the ListMap allmusic in listview1.

8. In listview1 onBindCustomView event, use blocks as shown in image below.

Here we get the file names of mp3 files in List Map allmusic and display them in textview1 of CustomView.

9. In more block MPcreate(pos), use blocks as shown in image below.

Here we perform following actions:
i. Set String currentfile to file path of song at pos in List Map allmusic.

ii. Get name of song from currentfile and display it in textview3.

iii. Make imageview1 VISIBLE.

iv. Set songPosition to pos.

v. Create MediaPlayer for currentfile using following code:
mp = MediaPlayer.create(getApplicationContext(), Uri.fromFile(new java.io.File(currentfile)));

vi. Set OnCompletionListener for the MediaPlayer using following code:
mp.setOnCompletionListener(new MediaPlayer.OnCompletionListener(){

public void onCompletion(MediaPlayer theMediaPlayer){

vii. On completion of song, reset and release the MediaPlayer, increase songPosition by 1, then create MediaPlayer for the new songPosition and start the MediaPlayer.

viii. Close MediaPlayer OnCompletionListener using following code:
}
});
ix. Set Seekbar max to song duration.

x. Display song duration in textview2.

10. In more block MPstart, use blocks as shown in image below.

Here we perform following actions:
i. Start playing the song using block MediaPlayer start.
ii. Display pause image in imageview1.
iii. Use a TimerTask, and every 400ms set progress of seekbar1 to current duration of song, and display current duration of song in textview1.

11. In more block MPpause, use blocks as shown in image below.

Here we perform following actions:
i. Cancel the Timer.
ii. Pause the MediaPlayer.
iii. Display play image in imageview1.

12. In the event listview1 onItemClicked, use blocks as shown in image below.

Here we perform following actions:
i. If songPosition is -1, create MediaPlayer for the song at the position of ListView clicked, and start playing the song.
ii. If songPosition is same as the position of ListView clicked, pause the song if it is playing and play the song if it is paused.
iii. If the position of ListView clicked is different from songPosition,
  a. if any song is playing then pause the song,
  b. reset MediaPlayer,
  c. release song from the MediaPlayer,
  d. Create MediaPlayer for the song at position of ListView clicked, and
  e. Start playing the song.

13. In the event seekbar1 onStopTrackingTouch, use blocks as shown in image below.

Here if songPosition is not -1, play song from the duration selected on seekbar

14. In the event imageview1 onClick, use blocks as shown in image below.

Here we pause the song if it is playing and play the song if it is paused.

15. In the event imageview2 onClick, use call the AsyncTask GetSongsTask using following code:
(new GetSongsTask()).execute();

16. In the onPause or onStop event use blocks as shown in image below.

Here if songPosition is not -1, and if MediaPlayer is playing, then pause the song.

**IMPORTANT**
If this step is causing errors or crashes, skip this step. Also if you want to continue playing song in background, skip this step.

17. In the More Block extra, use codes and blocks as shown below.

Here we perform following actions:
i. Define a new class AsyncTask GetSongsTask.
}

private class GetSongsTask extends AsyncTask<Void, Void, Void> {
@Override
protected void onPreExecute() {

ii. In onPreExecute, make imageview2 GONE and progressbar1 VISIBLE.

iii. Use following code:
}

@Override
protected Void doInBackground(Void... path) {

iv. In doInBackground method, set number r to 0, clear allmusic, clear folderList.
Then use getFileList in [filePath] block to get path of all songs from external storage to ListMap allmusic.
After that convert ListMap allmusic to Json String and save it in shared preferences using key "allsongs".

v. Use following code for onProgressUpdate and onPostExecute methods.
return null;
}
@Override
protected void onProgressUpdate(Void... values) {
}
@Override
protected void onPostExecute(Void param){

vi. In onPostExecute, make imageview2 VISIBLE and progressbar1 GONE. Display ListMap allmusic in listview1. Toast number of songs added.

vii. Use following code:
}

18. Define More Block getFileList in [filePath]  using blocks as shown in image below.

19. Define More Block searchFolders using blocks as shown in image below.

20. Save and Run the project. The Music Player app is ready.

Download music player Sketchware project data: http://sketchware.io/import.jsp?id=Gj1y