Membuat Custom MP3 Player di Android (part 1)

simple mp3 player

Ceritanya lagi mainin HP swipe kiri swipe kanan sambil hapusin SMS “Saya yang survey rumah kemarin…” and “Selamat anda telah terpilih sebagai pemenang…”, tiba2 ngga sengaja lihat icon Google Play Music. Hmm jadi keinget software2 audio player komputer jaman dulu. Kalo dulu sekitar tahun 2004’an pas gw SMP yg paling beken tuh Windows Media Player, WinAmp, sama JetAudio. And kegiatan sehari-hari pulang sekolah adalah ganti baju, ambil gitar, nyalain komputer, setel JetAudio and jreng jreng ngikutin lagu serasa anak band hahaha. Balik lagi ke waktu sekarang n masih pegang HP tiba2 jadi penasaran pengen bikin mp3 player sendiri, emang sih udah ada banyak aplikasi mp3 player gratisan yg bagus2. Tapi berhubung dalam rangka iseng, akhirnya coba googling sana googling sini, jadi juga deh mp3 player nya *tapi mp3 sangat sederhana* hhaha. So, here’s the story !

Download Aplikasi

Android telah menyediakan class “MediaPlayer” untuk fungsi audio player. Yang perlu kita lakukan adalah menggunakan objek dari class tersebut. Berikut fungsi-fungsi class MediaPlayer yang akan kita gunakan :

class mediaplayer

Nah berikutnya saatnya membuka IDE kesayangan anda hehe *disini gw pake eclipse luna*, n buat project baru dengan nama main activity : MainActivity.java, dan nama layoutnya : activity_main.xml.

uses SDK

1. Siapkan icon-icon yang akan digunakan

  • Previous, Backward, Play, Pause, Forward, Next
  • Repeat dan Shuffle
  • Playlist
  • Siapkan dua icon untuk setiap fungsi. Satu untuk keadaan default, dan satu lagi untuk keadaan focus.
  • Siapkan juga dua icon untuk Seekbar dengan warna yang berbeda. Satu untuk bar total durasi lagu, dan satu lagi untuk progress bar.
  • Siapkan file gambar yang akan ditampilkan sebagai art cover.
  • Simpan semua icon di folder drawable. Disini saya menyimpannya di “/res/drawable-xhdpi“.
  • *atau bisa menggunakan iconpack pada aplikasi yang sudah jadi via dowload link di atas*

daftar icon

2. Buat file XML untuk setiap icon

Kita perlu membuat file XML untuk setiap icon agar icon bisa berubah dari posisi default ke focus dan sebaliknya setiap kali terjadi event click. File XML ini disimpan di folder “drawable“. Disini saya menyimpannya di “/res/drawable-xhdpi“. Berikut contoh file XML untuk icon “Play” :

button play

Lakukan hal yang sama untuk setiap icon lainnya.

3. Buat file XML untuk Seekbar

File XML untuk Seekbar (background) disimpan di folder drawable -> “seekbar_bg.xml” :

seekbar bg

Berikutnya file XML untuk Seekbar progress, disimpan di folder drawable -> “seekbar_progress.xml” :

seekbar progress

4. Modifikasi layout Activity

Next saatnya modifikasi file layout “activity_main.xml” :

layout activity main
layout activity main
layout activity main
layout activity main
layout activity main
layout activity main

5. Buat layout XML untuk activity Playlist

Untuk layout playlist kita akan menggunakan Listview di dalam ListActivity. Pertama kita akan buat file XML untuk background ListView di dalam folder drawable -> “list_selector.xml” :

list selector

Setelah itu buat file XML untuk ListView di dalam folder layout, beri nama “playlist.xml” :

playlist

Terakhir buat file XML untuk menampilkan nama judul dan artist di dalam folder layout, beri nama “playlist_item.xml” :

playlist item

6. Modifikasi file “strings.xml” :

file strings

7. Modifikasi file “/res/value/menu/main.xml” :

file menu

8. Modifikasi file “AndroidManifest.xml” :

file manifest

Screenshot layout :

screenshot layout

Akhirnya selesai juga user interfacenya, lumayan panjang juga ya hehehe. And di part berikutnya kita akan membuat class-class java’nya !

Thx šŸ™‚

Reference : androidhive / android developer

2 respons untuk ā€˜Membuat Custom MP3 Player di Android (part 1)ā€™

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google

You are commenting using your Google account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

Connecting to %s