Android Membuat Ratingbar Seperti Google Play Store + Firebase

Ratingbar review dapat membuat produk atau aplikasi kita menjadi lebih bagus dari sebelumnya. Kenapa demikian? Karena dari review dan rating yang diberikan pengguna dapat diketahui apa saja masalah yang muncul dari aplikasi kita.

Nah pada kesempatan kali ini, melalui artikel ini saya akan membuat tutorial sederhana tentang bagaimana cara membuat tampilan rating / review seperti pada Google Play Store.  Seperti yang telah kita ketahui, tampilan rating review pada Google Play Store sangat bagus dan penuh warna, lihat gambar dibawah ini :

Rating pada Google Play Store

Untuk mendapatkan hasil seperti rating review pada Google Play Store, yang harus kalian pahami adalah bagaimana menghitung rumus rating (khususnya untuk tampilan rating dengan warna, kalau yang bintang sudah ada librarynya)

Untuk membuat icon rating (icon bintang), kalian dapat menggunakan beberapa library, tapi pada project ini saya menggunakan library Zhanghai Material RatingBar .


 

Oh iya pada project ini saya menggunakan Firebase Firestore untuk menyimpan data review dan rating. Jika kalian belum paham cara menggunakan Firebase Firestore, kalian bisa membaca postingan saya tentang cara menambahkan document dan collection di Firebase Firestore.

Buat project di Firebase

Buka Firebase Console dan buat project baru. Kalian juga dapat menggunakan project yang sudah ada di Firebase. Setelah itu, download file google-services.json kemudian tempatkan di folder app pada project android studio kalian.

Berikut ini saya membuat satu data di Firebase Firestore secara manual untuk mentesting aplikasi rating dan review (kalian bisa langsung implementasikan di data asli kalian) :

Data dummy di Firestore

Data diatas akan ditampilkan di andorid. Kemudian kita akan mengirimkan review dan rating terhadap product ini (data gambar diatas)

Okay, setelah sample data dibuat, sekarang kita buat project android studio untuk menampilkan data tersebut dan memberikan rating review..

Konfigurasi File Gradle

Saya menggunakan beberapa library yang digunakan dalam aplikasi, kalian bisa sesuaikan dan tambahkan di project kalian :

build.gradle (Project:RatingGooglePlayStore)

build.gradle (Module:app)

Buat Halaman Product

Halaman pertama yang ditampilkan adalah halaman untuk data product (MainActivity). Pada halaman ini data product yang saya buat diatas, akan ditampilkan disini.

Pertama, buat model object yang akan menampung data dari Firebase Firestore, kodenya seperti berikut :

ProductModel.java

Setelah itu, buat class Adapter yang akan meng-handle list data product (meskipun data product yang saya buat baru satu, tapi kemungkinan data product itu nambah adalah besar)

item_product.xml

ProductAdapter.java

Sekarang ambil data product dari Firebase Firestore dan tampilkan di Recyclerview dengan menggunakan kode dibawah ini :

MainActivity.java

If you follow all the steps above, you will get result look like the following image :

Judi Bola

Data product berhasil ditampilkan

Create Page Review

Setelah data product berhasil ditampilkan, sekarang kita buat halaman untuk menampilkan rating review da mengirim review.

ReviewModel.java

Class ini digunakan untuk meng-handle data reivew yang didapat dari Firebase Firestore

Sekarang buatkan adapter untuk list review :

item_review.xml

ReviewAdapter.java

Setelah adapter review berhasil dibuat, selanjutnya buat logic untuk menampilkan rating dengan bintang dan rating dengan warna (contoh rating yang dimaksud seperti dibawah ini ):

Rating berdasarkan bintang dan warna

Untuk mendapatkan hasil seperti gambar diatas, ada beberapa proses yang harus dilakukan, silakan ikuti dan pahami setiap prosesnya dibawah ini

1. Insert Review To Firestore

Kode diatas akan menyimpan data ke collection review di Firebase Firestore. Hasilnya akan seperti dibawah ini :

Hasil dari review yang kirim dari android

Baca juga : How to insert and display file image from Firebase Firestore

Setelah data review berhasil disimpan ke Firebase Firestore, kemudian update rating dalam product

2. Update Rating Product

Kode dibawah ini akan melakukan update rating ke data product. Setelah rating berhasil diperbaharui, secara otomatis tampilan nilai rating di mobile akan ikut berubah.

3. Update the rating color

4. Populating the recyclerview with data of reviews

Coba pahami semua logic dan kode diatas, dari sana kalian akan mengetahui secara detail rumus (secara matematika) untuk menampilkan rating bintang dan rating warna.

Berikut ini adalah kode lengkap dari class ReviewActivity.java :

Jangan lupa menambahkan permission INTERNET di AndroidManifest.xml

Mungkin itu saja beberapa langkah tentang bagaimana cara membuat rating review seperti Google Play Store di Android. Semoga bermanfaat

Hasil akhir :

Download project :



Baca juga :


About The Author

Related Posts

Add Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Berlangganan Artikel

Untuk mendaftarkan tutorial pemrograman terbaru dari putuguna[dot]com, silakan tuliskan email kalian dibawah ini