() translation by (you can also view the original English article)
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!
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.
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.
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.
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.
Di dalam file build.gradle yang sama, juga melakukan hal berikut:
- Update
buildToolsVersionanda ke'26.0.2'. - Set
targetVersiondancompileSdkVersionke26. - Pastikan artefak Android diperbarui juga.
1 |
dependencies { |
2 |
compile fileTree(dir: 'libs', include: ['*.jar']) |
3 |
testCompile 'junit:junit:4.12' |
4 |
compile 'com.android.support:appcompat-v7:26.1.0' |
5 |
compile 'com.android.support:cardview-v7:26.1.0' |
6 |
compile 'com.android.support:recyclerview-v7:26.1.0' |
7 |
compile 'com.android.support:design:26.1.0' |
8 |
compile 'com.squareup.picasso:picasso:2.5.2' |
9 |
compile 'com.android.support:support-v4:26.1.0' |
10 |
compile 'com.balysv:material-ripple:1.0.2' |
11 |
}
|
Artefak ini Android tersedia di Google Maven repositori. Jadi kunjungi proyek Anda build.gradle file untuk memasukkannya.
1 |
allprojects { |
2 |
repositories { |
3 |
jcenter() |
4 |
google() |
5 |
}
|
6 |
}
|
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.
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.
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.
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.
4. Tes App
Akhirnya, Anda dapat menjalankan app!
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.
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.
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.
Jika Anda menggesek ke kanan lagi, Anda akan melihat daftar artis yang ditampilkan dalam tab saat ini.
Menggesekkan ke tab terakhi yang menampilkan playlist. Di sini, Anda bahkan dapat menambahkan daftar putar baru dengan mengklik menu toolbar "+".
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!
