Здравствуйте, сегодня создадим на Android Studio более сложный аудиоплеер – со шкалой времени, в данном плеере будет показано время с начала проигрывания аудио трека, а также время до его окончания.
Скачать исходники для статьи можно ниже
Начала аналогично как и по предыдущей статье, когда мы создавали самый простой двухкнопочный аудиоплеер:
Создадим вот такой Аудиоплеер со шкалой времени:
1. Создаем новый проект в Android Studio:
Я выбрал платформу Android 4.0 – для того чтобы наше будущее приложение запускалось на версиях Андроида – Android 4.0+
Выбираем шаблон Empty Activity (Пустое Активити):
Далее оставляем все по умолчанию:
И жмем на кнопку Finish.
2. Редактируем файл activity_main.xml
Переходим в папку res, в ней в подпапку layout и жмем на файл – activity_main.xml, далее открываем вкладку Text (Текст):
И здесь добавляем кнопку, шкалу времени и три текстовые зоны (будет показано время в милесекундах, а также в обычных минутах и секундах до окончания песни и с начала проигрывания песни) в “Аудиоплеер”, вот такой код файла activity_main.xml у меня получился:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="mnogoblog.ru.myaudioplayer.MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Мой аудиоплеер!" />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="252dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageView" />
</LinearLayout>
<SeekBar
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/seekBar"/>
<Button
android:text="@string/play_str"
android:textSize="15pt"
android:textStyle="bold"
android:onClick="playAndStop"
android:id="@+id/ButtonPlayStop"
android:layout_width="420dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginRight="-3dp"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Medium Text"
android:id="@+id/textView1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Medium Text"
android:id="@+id/textView2" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Medium Text"
android:id="@+id/textView3" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Если перейти на вкладку “Design” (Дизайн) увидим как будет выглядеть наше будущее приложение:
3. Редактируем файл MainActivity
Далее переходим в файл MainActivity:
Заменяем код на следующий:
package mnogoblog.ru.myaudioplayer;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.media.MediaPlayer;
import android.os.Handler;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;
import android.widget.SeekBar;
import android.widget.TextView;
import java.util.concurrent.TimeUnit;
public class MainActivity extends AppCompatActivity {
private Button buttonPlayStop;
private MediaPlayer mediaPlayer;
private SeekBar seekBar;
private TextView textView1;
private TextView textView2;
private TextView textView3;
private double finalTime = 0;
private double finalTime2 = 0;
private final Handler handler = new Handler();
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.activity_main);
initViews();
}
private void initViews() {
buttonPlayStop = (Button) findViewById(R.id.ButtonPlayStop);
mediaPlayer = MediaPlayer.create(this, R.raw.mymusic);
seekBar = (SeekBar) findViewById(R.id.seekBar);
seekBar.setMax(mediaPlayer.getDuration());
seekBar.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
seekChange(v);
return false;
}
});
textView1 = (TextView) findViewById(R.id.textView1);
textView2 = (TextView) findViewById(R.id.textView2);
textView3 = (TextView) findViewById(R.id.textView3);
}
public void startPlayProgressUpdater() {
seekBar.setProgress(mediaPlayer.getCurrentPosition());
if (mediaPlayer.isPlaying()) {
Runnable notification = new Runnable() {
public void run() {
startPlayProgressUpdater();
}
};
handler.postDelayed(notification,1000);
}else{
mediaPlayer.pause();
buttonPlayStop.setText(getString(R.string.play_str));
}
String text = seekBar.getProgress() + " из " + seekBar.getMax();
textView1.setText(text);
finalTime = seekBar.getProgress();
textView2.setText(String.format("%d min, %d sec",
TimeUnit.MILLISECONDS.toMinutes((long) finalTime),
TimeUnit.MILLISECONDS.toSeconds((long) finalTime) -
TimeUnit.MINUTES.toSeconds(TimeUnit.MILLISECONDS.toMinutes((long)
finalTime)))
);
finalTime2 = seekBar.getMax() - finalTime;
textView3.setText(String.format("%d min, %d sec",
TimeUnit.MILLISECONDS.toMinutes((long) finalTime2),
TimeUnit.MILLISECONDS.toSeconds((long) finalTime2) -
TimeUnit.MINUTES.toSeconds(TimeUnit.MILLISECONDS.toMinutes((long)
finalTime2)))
);
}
private void seekChange(View v) {
if(mediaPlayer.isPlaying()){
SeekBar sb = (SeekBar) v;
mediaPlayer.seekTo(sb.getProgress());
} else {
SeekBar sb = (SeekBar) v;
mediaPlayer.seekTo(sb.getProgress());
finalTime = seekBar.getProgress();
textView2.setText(String.format("%d min, %d sec",
TimeUnit.MILLISECONDS.toMinutes((long) finalTime),
TimeUnit.MILLISECONDS.toSeconds((long) finalTime) -
TimeUnit.MINUTES.toSeconds(TimeUnit.MILLISECONDS.toMinutes((long)
finalTime)))
);
finalTime2 = seekBar.getMax() - finalTime;
textView3.setText(String.format("%d min, %d sec",
TimeUnit.MILLISECONDS.toMinutes((long) finalTime2),
TimeUnit.MILLISECONDS.toSeconds((long) finalTime2) -
TimeUnit.MINUTES.toSeconds(TimeUnit.MILLISECONDS.toMinutes((long)
finalTime2)))
);
}
}
public void playAndStop(View v){
if (buttonPlayStop.getText() == getString(R.string.play_str)) {
buttonPlayStop.setText(getString(R.string.pause_str));
try{
mediaPlayer.start();
startPlayProgressUpdater();
}catch (IllegalStateException e) {
mediaPlayer.pause();
}
}else {
buttonPlayStop.setText(getString(R.string.play_str));
mediaPlayer.pause();
}
}
}
Здесь в 38 строчке мы указали на имя аудиофайла, в данном примере – это mymusic.
4. Редактируем файл – strings.xml
Заходим res, в подпапку values и кликаем по файлу strings.xml
И заменяем на следующий код:
<resources>
<string name="app_name">Myaudioplayer</string>
<string name="play_str">PLAY</string>
<string name="pause_str">PAUSE</string>
</resources>
5. Загружаем аудиофайл.
Осталось загрузить аудиофайл, для этого нужно создать папку raw и загрузить в неё какой-нибудь mp3 файл с именем mymusic.
Для этого наводим курсор мыши на папку res и кликаем правой кнопкой мыши, открывается менюшка – выбираем в ней пункт New, и подпункт Directory – и создаем новую папочку с именем raw:
И у нас появилась новая папочка raw – наводим на неё курсор мышки и кликаем правой кнопкой, открывается меню – выбираем в ней пункт Show in Explorer:
после чего у нас откроется папочка, в которой заходим в папку raw и закачиваем туда mp3 с названием mymusic – можете скачать данный файл с моего сайта!
6. Создаем apk файл.
Теперь нам нужно создать apk файл для загрузки на Android устройства – для этого выбираем в верхнем меню пункт “Build”, подпункт “Build Apk”
Через некоторое время появится вот такое сообщение справа вверху:
Жмем на ссылку и у нас открывается папочка с apk файлом по имени
app-debug.apk
Можете переименовать файл, например в mypleer.apk и загрузить к себе на смартфон, установить и запустить приложение.
На этом все классных вам Android приложений!