Rating Bar

Rating Bar is use to get/indicate rating . For the better user interference this is very important to customize the rating bar according to need of theme. In this tutorial i am covering some steps of rating bar customization. 

Download Demo 

 <RatingBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

Steps to use RatingBar in your project.

1. Crate a project in android studio.
    
2. Open your main_activity.xml and update it-
   
   

   <?xml version="1.0" encoding="utf-8"?>
   
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:gravity="center"
       android:orientation="vertical"
       tools:context="com.pankaj.ratingbar.MainActivity">
   
       <!--_____________________________________________________-->
       <!--                                                                                                          -->
       <!--                                 create simple RatingBar                                -->
       <!--_____________________________________________________-->
   
       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="default rating bar"
           android:textAllCaps="true" />
   
       <RatingBar
           android:id="@+id/rtbDefault"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_margin="@dimen/activity_horizontal_margin" />
   
       <!--_____________________________________________________-->
       <!--                                                                                                          -->
       <!--                                 create simple RatingBar                               -->
       <!--_____________________________________________________-->
   
       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="custom rating bar"
           android:textAllCaps="true" />
   
       <RatingBar
           android:id="@+id/rtbCustom"
           android:layout_width="wrap_content"
           android:layout_height="32dp"
           android:layout_margin="@dimen/activity_horizontal_margin"
           android:progressDrawable="@drawable/custom_ratingbar_selector" />
   </LinearLayout>
   

    
    
3. Now see in your main_activity.xml, there are a custom drawable is used in second ratingbar
    

   android:progressDrawable="@drawable/custom_ratingbar_selector" />
   

   
   
   
4. So go to your resource directory and select your drawable directory and create new drawable resource file(selector)(drawable/custom_rating_selector.xml).
   
   

   <?xml version="1.0" encoding="utf-8"?>
   <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
       <item
           android:id="@android:id/background"
           android:drawable="@drawable/heart_empty_pink" />
       <item
           android:id="@android:id/secondaryProgress"
           android:drawable="@drawable/heart_half" />
       <item
           android:id="@android:id/progress"
           android:drawable="@drawable/heart_fill_pink" />
   </layer-list>
   

    
5. Open your MainActivity.JAVA class and update it -
   
   

   package com.pankaj.ratingbar;
   
   import android.os.Bundle;
   import android.support.v7.app.AppCompatActivity;
   import android.widget.RatingBar;
   import android.widget.Toast;
   
   public class MainActivity extends AppCompatActivity implements RatingBar.OnRatingBarChangeListener {
   
       //create objects
       RatingBar rtbDefault, rtbCustom;
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
   
           //initialize rating bar
           rtbDefault = (RatingBar) findViewById(R.id.rtbDefault);
           rtbCustom = (RatingBar) findViewById(R.id.rtbCustom);
   
           //set number of stars(default is 5)
           rtbDefault.setNumStars(5);
           rtbCustom.setNumStars(5);
   
           //set listeners
           rtbDefault.setOnRatingBarChangeListener(this);
           rtbCustom.setOnRatingBarChangeListener(this);
       }
   
       @Override
       public void onRatingChanged(RatingBar ratingBar, float v, boolean b) {
   
           //add switch case to differentiate rating bars
           switch (ratingBar.getId()) {
   
               //A meesage will be shown when rating given by default rating bar
               case R.id.rtbDefault:
                   Toast.makeText(this, "Selected by default rating bar : " + ratingBar.getRating(), Toast.LENGTH_SHORT).show();
                   break;
   
               //A meesage will be shown when rating given by custom rating bar
               case R.id.rtbCustom:
                   Toast.makeText(this, "Selected by custom rating bar : " + ratingBar.getRating(), Toast.LENGTH_SHORT).show();
                   break;
           }
       }
   }
   

   
   
6. Now all the development steps for RatingBar has completed, Please run the application.
   
   
   
   
   
   
7. Now select any rating from first ratigbar and see the result on screen-
   
   
   
     
    
   
   
8. Now select any rating from second ratingbar and see the result on screen-
   
   
   
   
    
   
   
9. s
   
   
   
   
10.  Good bye, Thanks to read this blog.

Download Demo