How to create Custom RatingBar Android Programming Tutorial

If you do not want Default RatingBar implementation then you can customize it by creating your own layouts and styles for it.

You need to get 3-star images to be added to your drawable folder.

1. A Empty (off) star image.
2. A Half Filled Star image.
3. A Fully Filled Star image.

Now create a custom XML for RatingBar in Drawable folder,

<?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_blank"/>
    <item
        android:id="@+android:id/secondaryProgress"
        android:drawable="@drawable/star_blank"/>
    <item
        android:id="@+android:id/progress"
        android:drawable="@drawable/star_filled"/>

</layer-list>

start_blank.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/star_off" 
          android:state_pressed="true" 
          android:state_window_focused="true"/>

    <item android:drawable="@drawable/star_off" 
          android:state_focused="true" 
          android:state_window_focused="true"/>

    <item android:drawable="@drawable/star_off" 
          android:state_selected="true" 
          android:state_window_focused="true"/>


    <item android:drawable="@drawable/star_off"/>

</selector>

star_filled.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/star" 
        android:state_pressed="true" 
        android:state_window_focused="true"/>
    
    <item android:drawable="@drawable/star" 
        android:state_focused="true" 
        android:state_window_focused="true"/>
    
    <item android:drawable="@drawable/star"
          android:state_selected="true" 
          android:state_window_focused="true"/>
    
    <item android:drawable="@drawable/star"/>

</selector>

Add the following to style.xml

<style name="customRatingBar" parent="@android:style/Widget.RatingBar">
  <item name="android:progressDrawable">@drawable/rating_custom_bar</item>
  <item name="android:minHeight">30dip</item>
  <item name="android:maxHeight">30dip</item>
</style>

Layout.xml

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.code2care.example.customratingbarexample.MainActivity" >
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="108dp"
        android:text="@string/header_text" />
    <RatingBar
        android:id="@+id/ratingBar1"
        style="@style/customRatingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="56dp" />
    <TextView
        android:id="@+id/ratingMessage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView1"
        android:layout_centerVertical="true"
        android:text=""
        android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>

MainActivity.java

package com.code2care.example.customratingbarexample;


import android.app.Activity;
import android.os.Bundle;
import android.widget.RatingBar;
import android.widget.RatingBar.OnRatingBarChangeListener;
import android.widget.TextView;


public class MainActivity extends Activity {
	
	
	RatingBar ratingBar;
	TextView rateMessage;
	String ratedValue;
	
	

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        
        ratingBar = (RatingBar) findViewById(R.id.ratingBar1);
		rateMessage = (TextView) findViewById(R.id.ratingMessage);

		ratingBar.setOnRatingBarChangeListener(new OnRatingBarChangeListener() {

			@Override
			public void onRatingChanged(RatingBar ratingBar, float rating,
					boolean fromUser) {
				
				System.out.println("Hwre");

				ratedValue = String.valueOf(ratingBar.getRating());
				rateMessage.setText("Rating : "
						+ ratedValue + "/5");

			}
		});
        
    }
   
    
  
}

⛏️ You can download the source code from GitHub: https://github.com/code2care/CustomRatingBarExample