Android Create RatingBar Review Like Google Play Store + Firebase

RatingBar review can make our product or apps become more better then before. From the reviews that given by users we able to know what problem of our product or apps.

This article will show you how to create ratingbar review that looks like rating on Google play store. As you know the user interface of review on Google Play store is great and full color.

To achieve rating look like Google Play Store, you have to know the formula of count rating view (especially for create rating that shown with color)

For create the icon of rating (icon star), you can use several library, but in this article I use library Zhanghai Material RatingBar.



Oh, In this article I also use Firebase Firestore as database to store the data of product and the reviews of product.

Create project in Firebase 

Open Firebase Console and create new project. You also can use the existing project in Firebase. After that download the google-services.json then place it on directory app in your project.

Here I created data of product in Firebase Firestore manually :

The sample product the created manually

The data above will displayed on mobile android, and then from android we will send the review of this product.

Create Android Studio Project

After the sample data in Firebase has created, now we crate the android application to display the sample data and send review that data.

Gradle Configuration

In this project, I use some libraries that support the application, you can see at the following gradle :

build.gradle (Project:RatingGooglePlayStore)

build.gradle (Module:app)

Create Page Product

The first page that will appears is page Product (MainActivity). In this page, the data that created manually in Firebase will displayed.

Recommended : Take image from gallery or camera using EasyImage Library

First, we create the model (object) that will handle the data from Firebase Firestore, here it is

ProductModel.java

After that, create Adapter that handle the list of product (even the sample product that create is one, but we still create adapter to handle much data)

item_product.xml

ProductAdapter.java

Now get the data of product from Firebase Firestore and then display it on Recyclerview by using the following code :

MainActivity.java

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

The data that I created manually in firebase has displayed on mobile

Create Page Review

After the product has displayed, now we create page review that display the rating, insert review and displaying review.

ReviewModel.java

This class use to handle data of review data got from Firebase Firestore, here is the code

Now create the adapter of list review :

item_review.xml

ReviewAdapter.java

After the adapter created, then create the logic how to show rating by stars and rating by color, take a look at the following images :

Rating using stars and colors 

To achieve the goal like the image above, there are several process that you have to do :

1. Insert Review To Firestore

The code above will store the data to collection review. Take a look at the following image :

Data review has stored into Firebase Firestore

Recommended : How to insert and display file image from Firebase Firestore

After data review stored successfully, the update the rating in product

2. Update Rating Product

The following code will update the rating in data product, after that will change the display of rating view and rating color.


3. Update the rating color


4. Populating the recyclerview with data of reviews

Take a learn of those codes above, that will guide you to understand the formula of displaying rating by stars and by colors.

Recommended : Insert image from android to database (server using PHP & MySQL)

Here is the full code of ReviewActivity.java :

Don't forget to add permission of INTERNET in your AndroidManifest.xml

Okay, that's all about the tutorial how to create rating or review look like Google Play Store. I hope this article will help you. Thank you.

Download the project : LINK GITHUB

Android Create, Read, Update And Delete Data in Firestore Firebase

The concept of data storage between Firebase and MySQL is different. If MySQL uses query concept (primary key, foreign key, etc), then Firebase not like that. Firebase stores data by Collection and Document.

We can say that collection and document are path of data that has stored in Firebase Firestore. We can name the collection by our selves (write the name whatever you want). Collection define as object or list of our data. Document can name by generate automatically from Firebase OR we also can name it by our selves.

Recommended : How to insert file image into Firebase Storage

This article will show you how to do CRUD (Create, Read, Update and Delete) data in Firebase Firestore.

Create Model Of Object

Before we start to do CRUD, let create one object called WebsiteModel.java to store the fields of Object


After the object was created, next we the function of Create, Read, Update, Remove data into/from Firestore

Insert Data

By using the following code, you can insert data into Firebase Store

When insert data, we use method add() after define its collection and its document. The result of the code above is :

Data has stored into Firestore

Take a look at the image above, Why the field of  idDocument is null?

This is my reason why the field of IdDocument is null :

• I create field IdDocument of object WebsiteModel for store the Document ID when the data has stored in Firestore
• So why null? Because when store data to Firestore, we don't know the Document ID that generated by Firebase automatically, we able to know the value of the Document ID when we retrieve the data.
• Just continue read this article (I guarantee you will understand what I mean)

Display Data

After data was stored, now we have to create new function/method that able to read the data from Firestore, here is the method :

And the result when we successfully displaying the data is :

Result of retrieving the data

As you can see at image above, the idDocument has a value : mZPoPqUkc3ZCFmsC4fEz. That was I said that the value of idDocument will able to see when we successfully retrieve the data from Firestore.

By getting the value of idDocument, now we can do process delete and update the data in Firestore.

Update Data

By using the following code you can update your data properly


The result of the code is :

Updating data

The thing you must remember is, when you try to update data, just use method set(), NOT add(), okay?

Delete Data

Now the last, you can delete your data by using the code below :

The result of the code is :

Result of deleting data

That's all about the steps how to do create, read, update and delete data from/to Firebase Firestore. Thank you.