How to create Custom Ratings bar in Android

Question

Hello all i need to perform Ratings in my application... SO i need to create custom Ratings bar... Can Anyone Help me in this?

Answer 1

Edit

Have a look at custom rating in motorola http://community.developer.motorola.com/t5/Android-App-Development-for/custom-rating-bar-style-using-android-s-ratingBar-small-style/td-p/10462

Updated

styles.xml

This must be located in your values folder

 <?xml version="1.0" encoding="utf-8"?>   <resources>     <style name="foodRatingBar" parent="@android:style/Widget.RatingBar">        <item name="android:progressDrawable">@drawable/food_rating_bar_full</item>        <item name="android:minHeight">23dip</item>        <item name="android:maxHeight">25dip</item>    </style>   </resources> 

food_rating_bar_full.xml

This file must be in Drawable folder.

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

food_ratingbar_full_empty.xml

This file must be inside Drawable folder.

<?xml version="1.0" encoding="utf-8"?>  <!-- This is the rating bar drawable that is used to  show a filled cookie. --> <selector xmlns:android="http://schemas.android.com/apk/res/android">  <item android:state_pressed="true"       android:state_window_focused="true"       android:drawable="@drawable/cookiee" />  <item android:state_focused="true"       android:state_window_focused="true"       android:drawable="@drawable/cookiee" />  <item android:state_selected="true"       android:state_window_focused="true"       android:drawable="@drawable/cookiee" />  <item android:drawable="@drawable/cookiee" />  </selector> 

food_ratingbar_full_filled.xml

This file must be located in Drawable folder.

<?xml version="1.0" encoding="utf-8"?>   <!-- This is the rating bar drawable that is used to  show a unfilled cookie. --> <selector xmlns:android="http://schemas.android.com/apk/res/android">  <item android:state_pressed="true"       android:state_window_focused="true"       android:drawable="@drawable/cookie" />  <item android:state_focused="true"       android:state_window_focused="true"       android:drawable="@drawable/cookie" />  <item android:state_selected="true"       android:state_window_focused="true"       android:drawable="@drawable/cookie" />  <item android:drawable="@drawable/cookie" />  </selector> 

main.xml file should look like :

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:orientation="vertical"     android:layout_width="fill_parent"     android:layout_height="fill_parent">      <RatingBar android:id="@+id/ratingBar1"         style="@style/foodRatingBar"         android:layout_width="wrap_content"         android:layout_height="wrap_content">      </RatingBar> </LinearLayout> 

MainActivity.class should look like :

import android.app.Activity; import android.os.Bundle; import android.widget.RatingBar; import android.widget.RatingBar.OnRatingBarChangeListener; import android.widget.Toast;  public class MainActivity extends Activity { /** Called when the activity is first created. */  RatingBar rb;  @Override public void onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     setContentView(R.layout.main);      rb=(RatingBar)findViewById(R.id.ratingBar1);      rb.setOnRatingBarChangeListener(new OnRatingBarChangeListener(){          @Override         public void onRatingChanged(RatingBar ratingBar, float rating,                 boolean fromUser) {             // TODO Auto-generated method stub                 Toast.makeText(getApplicationContext(),Float.toString(rating),Toast.LENGTH_LONG).show();          }      });  } } 

I have used two images:

cookie.jpg

cookiee.jpg

This two images are of same size one is used for identifying selected Rating Bar and other for identifying unselected RatingBar

Answer 2

I need to add my solution which is WAY eaiser than the one above. We don't even need to use styles.

Create a selector file in the drawable folder:

custom_ratingbar_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/star_off" />   <item android:id="@android:id/secondaryProgress"     android:drawable="@drawable/star_off" />   <item android:id="@android:id/progress"     android:drawable="@drawable/star_on" />  </layer-list> 

In the layout set the selector file as progressDrawable:

 <RatingBar         android:id="@+id/ratingBar2"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_gravity="center_horizontal"         android:layout_marginTop="20dp"         android:progressDrawable="@drawable/custom_ratingbar_selector"         android:numStars="8"         android:stepSize="0.2"         android:rating="3.0" /> 

And that's all we need.