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






Recent Posts:
Hello there!,

You are using AdBlocker!

I am an independent developer trying to help fellow developers and students to resolve issues faced on a day-to-day basis, we 'Code to Care' . There is a lot of expenses involved in hosting and managing a website that's the reason we have ads.

A humble request to you to disable adBlocker on Code2care.org and support us pay our bills.

Thanks,
Cod2ecare - Line's of code for change.

To see contents reload page after unblocking
Code2care is an initiative to publish and share varied knowledge in programming and technical areas gathered during day-to-day learnings and development activities.

Students and Software Developers can leverage this portal to find solutions to their various queries without re-inventing the wheel by referring to our easy to understand posts. Technical posts might include Learnings, Video Tutorials, Code Snippets, How Tos, Blogs, Articles, etc.