Advertisement
  1. Code
  2. Android SDK

Membuat sebuah aplikasi musik dengan Android App Template

by
Read Time:9 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Dean Ramadhan (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Developing user interface yang cantik untuk Android apps dapat menjadi usaha yang memakan waktu. Berikut adalah beberapa langkah-langkah yang biasanya kita coba untuk merancang sebuah aplikasi:

  • Kita mulai melakukan brainstorming dan kemudian menggambar (dengan kertas dan pena) UI apa yang akan terlihat seperti apa. Dengan kata lain, kita melakukan wireframe App.
  • Kami membuat desain UI sebenarnya dari wireframe dalam desain perangkat lunak seperti Photoshop atau Sketch.
  • Kami menerjemahkan UI Deain ke kode di Android Studio. Di sini kami kode business logic. Disarankan kami juga mematuhi prinsip material design.

Dan ini hanya puncak gunung es-merancang aplikasi adalah banyak pekerjaan! Semua tugas ini dapat memakan waktu — terutama jika Anda adalah satu-satunya orang yang melakukannya.

Namun, di pasar ini sudah sangat kompetitif app, Anda harus bergerak cepat dan pastikan aplikasi Anda memiliki user interface yang cantik (selain memastikan kode bebas dari bug) atau user lain akan pergi dan menginstal aplikasi pesaing Anda.

Untungnya, CodeCanyon menawarkan berbagai macam aplikasi indah template untuk memulai proyek aplikasi mobile Anda. Dalam tutorial ini, saya akan membantu Anda memulai dengan salah satu template, dinamakan Android Material UI Template 3.0. Kami akan membuat aplikasi material design musik menggunakan template ini dan juga menjelajahi beberapa fungsi yang berguna.

Jika makanan yang cinta musik, bermain di. -William Shakespeare

Prasyarat

Untuk dapat mengikuti tutorial ini, Anda akan memerlukan Android Studio 3.0 atau lebih tinggi.

1. Dapatkan Template

Untuk mulai membangun aplikasi musik, Anda akan memerlukan account dengan Envato Makert. Jadi siahkan daftar jika belum punya, dan beli Material Android UI Template 3.0 di CodeCanyon. Anda akan melihat berapa banyak pekerjaan menghemat Anda!

Envato Android Material UI Template 30 Envato Android Material UI Template 30 Envato Android Material UI Template 30

Setelah Anda telah berhasil membeli template, kode sumber template tersedia dalam ZIP file-jadi pastikan Anda men-download ZIP file ke komputer Anda.

2. unzip File

Sekarang pergi ke folder dimana ZIP file download dan unzip atau ekstrak.

Folders available in root folderFolders available in root folderFolders available in root folder

Ketika Anda memasukkan root folder dan klik pada folder Project, Anda akan melihat daftar folder template. Berikut adalah apa yang saya miliki pada mesin Windows 10 saya setelah itu. Perhatikan bahwa ketika Anda membeli template ini, Anda memiliki akses tidak hanya untuk template App musik, tetapi juga untuk delapan template lain (seperti yang Anda lihat dalam gambar di atas).

3. mengimpor Template

Jalankan Android Studio 3 dan pilih File > New > import project...

Pastikan untuk menavigasi ke folder di mana template diekstrak terletak dan pilih template Music App untuk mengimpor.

Setelah impor berhasil, Android Gradle plugin update kotak dialog akan muncul. Sebaiknya Anda mengeklik tombol Update — untuk memungkinkan Android Studio untuk meng-upgrade plugin Gradle kami ke versi terbaru (3.0.0) bagi kita.

Update Gradle plugin dialog Update Gradle plugin dialog Update Gradle plugin dialog

Ketika Gradle selesai sinkronisasi proyek Anda secara otomatis, Anda akan menemukan kesalahan ini di Android Studio karena kita telah berhasil memperbarui dependency Gradle kita untuk 3.0.0.

Android Studio logcat error Android Studio logcat error Android Studio logcat error

Untuk mengatasi ini, kunjungi app proyek modul build.gradle file dan menggunakan outputFileName bukan output.outputFile di  dalam release build tipe konfigurasi. Pastikan Anda serupa dengan yang di gambar di bawah.

Project Gradle file Project Gradle file Project Gradle file

Di dalam file build.gradle yang sama, juga melakukan hal berikut:

  • Update buildToolsVersion anda ke '26.0.2'.
  • Set targetVersion dan compileSdkVersion ke 26.
  • Pastikan artefak Android diperbarui juga.

Artefak ini Android tersedia di Google Maven repositori. Jadi kunjungi proyek Anda build.gradle file untuk memasukkannya.

Dengan menambahkan artefak, kita diajarkan Gradle bagaimana menemukan perpustakaan. Pastikan Anda ingat untuk melakukan sinkronisasi proyek Anda setelah menambahkan mereka.

Perhatikan bahwa template ini menggunakan artefak Picasso untuk memuat dan menampilkan gambar tersebut. Anda dapat dengan mudah swap ke Glide sebaliknya jika Anda ingin.

Sekarang, jika Anda running proyek, Anda akan mendapatkan pesan eror ditampilkan pada Android Studio Logcat.

Project error displayed on Android Studio logcatProject error displayed on Android Studio logcatProject error displayed on Android Studio logcat

Untuk mengatasi kesalahan ini, pergi ke /data/Tools.java dan menghapus metode getAPIVersion(). Pastikan Anda mengubah metode berikut — dalam gambar di bawah — dalam kode Anda untuk menjadi serupa dengan apa yang kita miliki di sini.

Project methods in ToolsjavaProject methods in ToolsjavaProject methods in Toolsjava

Anda dapat melihat seberapa baik terstruktur file proyek. Anda akan disarankan untuk menyelam dalam dan lihatlah kode sumber (lebih mudah dimengerti). Sementara di sana, Anda dapat dengan bebas memodifikasi setiap bagian dari kode yang sesuai dengan kebutuhan Anda.

Project files structure in Android StudioProject files structure in Android StudioProject files structure in Android Studio

Misalnya, jika Anda tidak menyukai pilihan warna yang digunakan untuk template, tidak ada yang menghentikan Anda dari mengunjungi resource colors.xml dan memodifikasi mereka sesuai selera Anda.

Project colorsxml resource folderProject colorsxml resource folderProject colorsxml resource folder

4. Tes App

Akhirnya, Anda dapat menjalankan app!

Tutorial project resultTutorial project resultTutorial project result

Anda dapat memberitahu bahwa interface app musik ini dirancang dengan baik. Secara default, tab pertama dipilih — itu menunjukkan daftar lagu-lagu yang tersedia. Klik pada salah satu lagu dan menikmati musik yang sedang dimainkan (walaupun hanya satu lagu ini tersedia di app).

Catatan bahwa ini template tidak Daftar lagu-lagu yang tersedia pada host device. Sebaliknya, ia datang dengan data sendiri dummy (untuk tujuan demonstrasi). Jadi, Anda akan perlu kode fungsi untuk daftar lagu pada perangkat host. dummy data class generator terletak di /data/Constant.java.

Project Constantjava Project Constantjava Project Constantjava

Jika Anda mengklik navitasi dalam wadah lagu bermain saat ini (terletak di bagian bawah layar), itu akan membuka kegiatan rinci tampak bagus tentang memainkan lagu saat ini. Di sini kita dapat dengan mudah menerapkan lebih banyak fungsi seperti sebagai mengacak, ulangi, dan pindah ke lagu berikutnya atau sebelumnya. Dicatat bahwa fungsi ini tidak dilaksanakan secara default dalam template.

Music app showing detail of the current song playingMusic app showing detail of the current song playingMusic app showing detail of the current song playing

Perhatikan bahwa interface template cantik ini adalah antarmuka tab Android menggunakan ViewPager. Jika Anda menggesek tepat, Anda akan melihat daftar album dengan gambar dalam tab.

Music app showing a list of albums in current tabMusic app showing a list of albums in current tabMusic app showing a list of albums in current tab

Jika Anda menggesek ke kanan lagi, Anda akan melihat daftar artis yang ditampilkan dalam tab saat ini.

Music app showing a list of artists in current tabMusic app showing a list of artists in current tabMusic app showing a list of artists in current tab

Menggesekkan ke tab terakhi yang menampilkan playlist. Di sini, Anda bahkan dapat menambahkan daftar putar baru dengan mengklik menu toolbar "+".

Music app showing list of playlists in current tabMusic app showing list of playlists in current tabMusic app showing list of playlists in current tab

Ingat, jika Anda ingin membuat uang dari aplikasi ini dengan menampilkan iklan, Anda dapat dengan mudah mengintegrasikan dengan AdMob. Untuk mempelajari tentang bagaimana untuk mengintegrasikan AdMob dengan aplikasi Android, memeriksa tutorial saya di sini di Envato Tuts +.

Kesimpulan

App template adalah cara yang bagus untuk jumpstart proyek development berikutnya atau untuk belajar dari karya orang lain. Artikel ini menunjukkan Anda bagaimana kita dengan cepat membuat app musik tampak bagus yang menggunakan Android Material UI Template 3.0 di CodeCanyon. Ingat, jika Anda mencari inspirasi atau Anda sedang membangun aplikasi dan memerlukan bantuan dengan fitur tertentu, maka Anda dapat menemukan jawaban Anda dalam beberapa template ini.

Envato Market memiliki ratusan template aplikasi Android lain yang dapat Anda pilih dari. Ada template untuk games dan aplikasi yang lengkap, serta template starter komprehensif seperti yang kita digunakan dalam posting ini. Jadi kita lihat, dan Anda hanya mungkin menyelamatkan diri banyak pekerjaan pada aplikasi Android Anda berikutnya.

Jika Anda ingin menjelajahi lebih banyak aplikasi iOS dan template, kemudian memeriksa beberapa posting kami pada CodeCanyon app template!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.