Java, Android, MySQL, PHP, HTML

Android Membuat Tampilan GridView Menggunakan StaggeredGridLayoutManager

Untuk menampilkan list sebuah gambar yang berisi diskripsi biasanya akan terlihat lebih bagus dan indah jika menampilkannya menggunakan tampilan Gridview.

Jika pada data yang akan ditampilkan hanya berbentuk tulisan dan beberapa icon, kita cukup dengan menggunakan recyclerview + Linear Layout Manager saja sudah bagus. Tapi jika bebentuk gambar dan berisi diskripsi, menggunakan recyclerview akan mengurangi tampilan indahnya.

Contoh aplikasi yang saat ini menggunakan tampilan gridview adalah Buka Lapak, OLX, dll.

Menggunakan Gridview akan menghasilkan tampilan seperti dibawah ini :

Hasil Akhir

Untuk membuat tampilan seperti gambar diatas, ikutilah beberapa langkah dibawah ini

Compile Library


Compile beberapa library berikut yang digunakan untuk membuat tampilan gridview

Layouting


Ada dua buah layout yang digunakan dalam project ini, antara lain :

1. activity_main.xml

Layout ini berisi view recyclerview yang akan digunakan untuk menampilkan semua data, kode lengkapnya sebagai berikut :

2. item_car_layout.xml

Layout ini digunakan untuk menampilkan setiap object data yang telah disimpan dalam model.

Layout ini berisi semua attribute yang berhubungan dengan data, misalnya Image, Nama Mobil, Harga Mobil, Jumlah, Ketersediaan, dll (sesuaikan dengan kebutuhan kalian).

Juga layout ini akan digunakan di adapter. Kode lengkapnya sebagai berikut :


Koding Di Class Java


Pada bagian ini yaitu proses koding diclass java, ada beberapa class yang akan digunakan untuk mendapatkan hasil seperti gambar diatas, antara lain :

1. CarModel.java

File ini berfungsi untuk menampung data satu buah object sebelum data tersebut dilempat kelist dan ditampilan di recyclerview dalam bentuk gridview. Kode lengkapnya seperti berikut :

2. CarAdapter.java

File ini berfungsi sebagai tempat untuk men set semua data yang ada di list ke item_car_layout sebelum dilempar ke recyclerview. Kode lengkapnya seperti dibawah ini :

3. SpacesItemDecorationGridView.java

File ini digunakan untuk membuat antara item satu dengan item yang lainnya ada jarak, tidak menyatu banget, dengan adanya jarak, maka tampilannya akan terlihat lebih indah (lihat gambar yang diatas sebelumnya). Kode lengkapnya seperti dibawah ini :

4. MainActivity.java

Seperti biasa, file ini digunakan sebagai tempat meng inisiasikan recyclerview (kalian bisa saja menggunakan class lain). Disamping itu, pada class ini juga tempat men set data-data yang akan disimpan dilist untuk kemudian ditampilkan ke recyclerview dalam bentuk gridview.

Di class ini juga si  StaggeredGridLayoutManager muncul. StaggeredGridLayoutManager digunakan sebagai pengganti LinearLayoutManager yang dibiasa digunakan recyclerview (Namun untuk data-data biasa).

Untuk lebih jelasnya silakan lihat kode lengkapnya dibawah ini :

Itulah beberapa langkah yang dapat saya berikan untuk membuat suatu tampilan gridview menggunakan StaggeredGridLayoutManager. Jika ada pertanyaan, silakan langsung saja ditanyakan di kolom komentar. Semoga bermanfaat.
0 Comment(s) for "Android Membuat Tampilan GridView Menggunakan StaggeredGridLayoutManager"

Please post a polite comment and do not post a spam

Back To Top
close