Step 1: Open a new android project
After 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.1. Select Empty Views 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).
Keep the name of your music player as ZepPlayer
Step 2: Designing the User Interface of the app
In this app, we have used components:
- a play and pause button to play and pause our song
- a next button to play next our song
- a previous button to play previous our song
- a SeekBar to Seek our song
- 2 TextView to use song
Step 3: Create play, pause, next, previous button
1.First click on File then New and then Vector Asset
2.Now click on the button logo next to clip art as shown in the screenshot
Now give it a name. and next then finish
Similarly make pause, next, and previous buttons
Name all buttons like this
Play - btn_play
Pause - btn_pause
Next - btn_next
Previous - btn_previous
Step 4: Music icon add
Shown in the following screenshot
Watch video for better understanding
Step 6: Design for activity_main.xml file.
Copy paste this code in activity_main.xml file.
Shown in the following screenshot
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="vertical">
<RelativeLayout
android:layout_gravity="center"
android:id="@+id/ret"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#03A9F4"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="16dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerInParent="true"
android:text="Play_Songs"
android:textColor="#FFF"
android:textSize="35dp" />
</RelativeLayout>
<RelativeLayout
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/imIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@drawable/icon" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<SeekBar
android:id="@+id/runMusic"
android:layout_marginTop="70dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:id="@+id/startTime"
android:layout_alignTop="@+id/runMusic"
android:layout_marginTop="20dp"
android:layout_marginLeft="8dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0:00"/>
<TextView
android:id="@+id/endTime"
android:text="0:00"
android:layout_alignTop="@+id/startTime"
android:layout_marginLeft="370dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<RelativeLayout
android:layout_marginTop="900dp"
android:layout_centerVertical="true"
android:layout_width="match_parent"
android:layout_height="70dp">
<Button
android:id="@+id/btnPlay"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="150dp"
android:background="@drawable/btn_pause">
</Button>
<Button
android:id="@+id/btnNext"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="150dp"
android:layout_toRightOf="@+id/btnPlay"
android:background="@drawable/btn_next">
</Button>
<Button
android:id="@+id/btnPrevious"
android:layout_centerInParent="true"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginTop="150dp"
android:layout_toLeftOf="@+id/btnPlay"
android:background="@drawable/btn_previous">
</Button>
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
End activity_main.xml file code
Step 7: The complete Java code: MainActivity.java file
Copy paste this code in MainActivity.java file
Shown in the following screenshot
package com.example.zepplayer;
import androidx.appcompat.app.AppCompatActivity;
import android.graphics.PorterDuff;
import android.media.MediaPlayer;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.widget.Button;
import android.widget.SeekBar;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.Timer;
import java.util.TimerTask;
public class MainActivity extends AppCompatActivity {
int currentIndex;
MediaPlayer mediaPlayer;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button btnPlay = findViewById(R.id.btnPlay);
Button btnNext = findViewById(R.id.btnNext);
Button btnPrevious = findViewById(R.id.btnPrevious);
TextView endTime = findViewById(R.id.endTime);
TextView startTime = findViewById(R.id.startTime);
SeekBar runMusic = findViewById(R.id.runMusic);
ArrayList<Integer> songs = new ArrayList<>();
songs.add(0,R.raw.music1);
songs.add(1,R.raw.music2);
songs.add(2,R.raw.music3);
songs.add(2,R.raw.music4);
songs.add(2,R.raw.music5);
mediaPlayer = MediaPlayer.create(getApplicationContext(),songs.get(currentIndex));
runMusic.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
if (b){
mediaPlayer.seekTo(i);
runMusic.setProgress(i);
}
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}
});
// SeekBar Time
new Timer().scheduleAtFixedRate(new TimerTask() {
@Override
public void run() {
runMusic.setProgress(mediaPlayer.getCurrentPosition());
runMusic.setMax(mediaPlayer.getDuration());
}
}, 0, 800);
// SeekBar Time
// seekBar Time Update
String lastTime = makeTime(mediaPlayer.getDuration());
endTime.setText(lastTime);
final Handler handler = new Handler();
final int delay = 400;
handler.postDelayed(new Runnable() {
@Override
public void run() {
String currentTime = makeTime(mediaPlayer.getCurrentPosition());
startTime.setText(currentTime);
handler.postDelayed(this, delay);
}
},delay);
// seekBar Time Update
btnPlay.setOnClickListener(view -> {
if( mediaPlayer!=null && mediaPlayer.isPlaying()){
mediaPlayer.pause();
btnPlay.setBackgroundResource(R.drawable.btn_play);
}
else {
mediaPlayer.start();
btnPlay.setBackgroundResource(R.drawable.btn_pause);
}
});
btnNext.setOnClickListener(view -> {
if (mediaPlayer!=null){
btnPlay.setBackgroundResource(R.drawable.btn_pause);
}
if (currentIndex<songs.size()-1){
currentIndex++;
}else {
currentIndex= 0;
}
if (mediaPlayer.isPlaying()){
mediaPlayer.stop();
}
mediaPlayer = MediaPlayer.create(getApplicationContext(),songs.get(currentIndex));
mediaPlayer.start();
String lastTime1 = makeTime(mediaPlayer.getDuration());
endTime.setText(lastTime1);
mediaPlayer.setOnCompletionListener(mediaPlayer -> btnNext.performClick());
});
btnPrevious.setOnClickListener(view -> {
if (mediaPlayer!=null){
btnPlay.setBackgroundResource(R.drawable.btn_pause);
}
if (currentIndex>0){
currentIndex--;
}else {
currentIndex=songs.size()-1;
}
if (mediaPlayer.isPlaying()){
mediaPlayer.stop();
}
mediaPlayer = MediaPlayer.create(getApplicationContext(),songs.get(currentIndex));
mediaPlayer.start();
String lastTime1 = makeTime(mediaPlayer.getDuration());
endTime.setText(lastTime1);
});
mediaPlayer.setOnPreparedListener(mediaPlayer -> {
runMusic.setMax(mediaPlayer.getDuration());
mediaPlayer.start();
});
// create Time from seekBar
}
public String makeTime (int duration)
{
String time = "";
int minute = duration/1000/60;
int second = duration/1000%60;
time+=minute+":";
if (second<10)
{
time+="0";
}
time+=second;
return time;
}
}
// create Time from seekBar
- using Android Virtual Device (emulator)
- by connecting your phone using USB
Step 8: Let’s Run our app
Click the “Run” button at the Toolbar at the top to run our code.
You can run your app two ways: