Membuat Custom MP3 Player di Android (part 1)

**Update: Source code untuk aplikasi ini sudah hilang. Silakan menuju ke versi baru**

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 :

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.

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*

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” :

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” :

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

4. Modifikasi layout Activity

Next saatnya modifikasi file layout “activity_main.xml” :

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” :

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

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

6. Modifikasi file “strings.xml” :

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

8. Modifikasi file “AndroidManifest.xml” :

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