Saya sudah pernah membahas tentang cara membuat aplikasi Wallpaper di Android menggunakan Appy Builder, tetapi saya akan buat aplikasi yang sedikit berbeda dari yang sebelumnya. Jika pada tutorial sebelumnya saya menggunakan image gallery di Appybuilder dan perintah set wallpaper menggunakan Activity Starter, kali ini kita akan menggunakan Komponen wallpaper dari Kodular , sedangkan untuk gallerinya kita akan menampilkan dalam grid yang kita buat sendiri
Oke, kita langsung saja memulai dengan membuat Sebuah Project
Pada contoh ini saya hanya akan menampilkan 3 kategori gambar, masing-masing berisi 6 image. Jadi kita memasukkan TabLayout di bagian atas dan di bawahnya kita tambahkan TableArrangement, sedangkan komponen image kita buat 6 komponen image ke dalam Layout TableArrangement. Tambahkan juga komponen Wallpaper, Notifier dan imageutility
Properties yang perlu disetting untuk masing-masing komponen adalah sebagai berikut:
1. TabLayout
Pada contoh ini, kita hanya menggunakan 6 komponen image jadi dimungkinkan untuk membuat perintah bagi masing-masing komponen secara terpisah. Tetapi jika komponen image yang kita pakai banyak, maka kita harus membuat banyak block dan itu tidak efisien. Jadi mulai dulu dengan memasukkan komponen image tersebut ke dalam sebuah list tabel agar kita dapat melakukan sebuah perintah dan itu berlaku untuk semua komponen image tersebut. Lalu kita lanjutkan dengan membuat prosedur untuk mengatur komponen image, yang akan pakai saat kita butuhkan.
Perhatikan blocks di atas, Daftar Gambar Thumbnail untuk masing-masing kategori jumlahnya berbeda. Ini sengaja dibuat agar kamu mengerti apa yang terjadi jika jumlah gambar yang akan ditampilkan berbeda dengan jumlah komponen image yang tersedia.
Pada Procedure InitializeImage kita membuat perintah untuk untuk seluruh komponen image dalam daftar listimage yang sudah kita buat. Begitu juga dengan Prosedure ClearImage, kita lakukan 3 perintah untuk semua komponen image. InitializeImage hanya dijalankan pada saat pertama kali aplikasi dibuka yaitu menetapkan ukuran dari Komponen Image, sedangkan ClearImage dilakukan setiap kali User memilih kategori yang tersedia pada TABLayout.
Kita lanjutkan dengan block untuk menampilkan gambar dari daftar gambar yang sudah kita buat. Lanjutkan dengan membuat block seperti di bawah ini
Pada block di atas inilah perintah untuk meload gambar ke komponen image sekaligus menampilkannya. Jadi jika gambar yang tersedia di daftar hanya 4, maka komponen yang ditampilkan hanya 4 komponen image. Selanjutnya jika file dari gambar yang ada di dalam daftar tidak ditemukan maka aplikasi akan menampilkan gambar mprev.jpg (lihat pada block sebelumnya di bagian ClearImage).
Setelah itu, Kita tinggal menambahkan block untuk menerapkan wallpaper saat user memilih sebuah gambar.
Pada Block di atas, perintah untuk setiap komponen Gambar (imageX.click) harus dibuat untuk masing-masing komponen image. Jadi jika kamu membuat 60 komponen image, maka kamu harus membuat seluruhnya dengan cara yang sama dengan contoh block di atas.
Terakhir... Kamu tinggal Upload Gambar ke Asset dengan nama file seperti yang ada pada daftar gambar untuk thumbnailnya. Sedangkan untuk wallpapernya (gambar yang lebih besar) diberi nama dengan cara yang sama, tetapi _Thumb_ diganti dengan _Wall_
Dengan contoh di atas, Kamu tinggal mempelajari cara menggunakan firebase dan firebaseStorage untuk membuat aplikasi wallpaper secara online. Untuk mempersingkat waktu, kamu bisa download File AIA di bawah ini lalu import AIA file dari Kodular.
Oke, kita langsung saja memulai dengan membuat Sebuah Project
- Buka Kodular
- Create project baru dengan nama MyWallpaper
- Tambahkan komponen-komponen seperti pada gambar di bawah
Pada contoh ini saya hanya akan menampilkan 3 kategori gambar, masing-masing berisi 6 image. Jadi kita memasukkan TabLayout di bagian atas dan di bawahnya kita tambahkan TableArrangement, sedangkan komponen image kita buat 6 komponen image ke dalam Layout TableArrangement. Tambahkan juga komponen Wallpaper, Notifier dan imageutility
Properties yang perlu disetting untuk masing-masing komponen adalah sebagai berikut:
1. TabLayout
- Width : Fill Parrent
- Width : Fill Parrent
- Height : Fill Parrent
- Colums : 2
- Rows : 3
Pada contoh ini, kita hanya menggunakan 6 komponen image jadi dimungkinkan untuk membuat perintah bagi masing-masing komponen secara terpisah. Tetapi jika komponen image yang kita pakai banyak, maka kita harus membuat banyak block dan itu tidak efisien. Jadi mulai dulu dengan memasukkan komponen image tersebut ke dalam sebuah list tabel agar kita dapat melakukan sebuah perintah dan itu berlaku untuk semua komponen image tersebut. Lalu kita lanjutkan dengan membuat prosedur untuk mengatur komponen image, yang akan pakai saat kita butuhkan.
Perhatikan blocks di atas, Daftar Gambar Thumbnail untuk masing-masing kategori jumlahnya berbeda. Ini sengaja dibuat agar kamu mengerti apa yang terjadi jika jumlah gambar yang akan ditampilkan berbeda dengan jumlah komponen image yang tersedia.
Pada Procedure InitializeImage kita membuat perintah untuk untuk seluruh komponen image dalam daftar listimage yang sudah kita buat. Begitu juga dengan Prosedure ClearImage, kita lakukan 3 perintah untuk semua komponen image. InitializeImage hanya dijalankan pada saat pertama kali aplikasi dibuka yaitu menetapkan ukuran dari Komponen Image, sedangkan ClearImage dilakukan setiap kali User memilih kategori yang tersedia pada TABLayout.
Kita lanjutkan dengan block untuk menampilkan gambar dari daftar gambar yang sudah kita buat. Lanjutkan dengan membuat block seperti di bawah ini
Pada block di atas inilah perintah untuk meload gambar ke komponen image sekaligus menampilkannya. Jadi jika gambar yang tersedia di daftar hanya 4, maka komponen yang ditampilkan hanya 4 komponen image. Selanjutnya jika file dari gambar yang ada di dalam daftar tidak ditemukan maka aplikasi akan menampilkan gambar mprev.jpg (lihat pada block sebelumnya di bagian ClearImage).
Setelah itu, Kita tinggal menambahkan block untuk menerapkan wallpaper saat user memilih sebuah gambar.
Pada Block di atas, perintah untuk setiap komponen Gambar (imageX.click) harus dibuat untuk masing-masing komponen image. Jadi jika kamu membuat 60 komponen image, maka kamu harus membuat seluruhnya dengan cara yang sama dengan contoh block di atas.
Terakhir... Kamu tinggal Upload Gambar ke Asset dengan nama file seperti yang ada pada daftar gambar untuk thumbnailnya. Sedangkan untuk wallpapernya (gambar yang lebih besar) diberi nama dengan cara yang sama, tetapi _Thumb_ diganti dengan _Wall_
Dengan contoh di atas, Kamu tinggal mempelajari cara menggunakan firebase dan firebaseStorage untuk membuat aplikasi wallpaper secara online. Untuk mempersingkat waktu, kamu bisa download File AIA di bawah ini lalu import AIA file dari Kodular.
Posting Komentar