Android - Custom RatingBar Example

CUSTOM RATINGBAR

SOURCE CODE [main.xml] is

<?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">
               
                <TextView android:layout_width="fill_parent"
                                android:layout_height="wrap_content"

android:text="@string/hello" />

                <RatingBar android:id="@+id/ratingbar"

android:layout_width="wrap_content"

                                style="@style/CustomRatingBar"

android:layout_height="50px" />

</LinearLayout>


SOURCE CODE [styles.xml] is

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="CustomRatingBar" parent="@android:style/Widget.RatingBar.Small">

<item name="android:progressDrawable”>@drawable/custom_ratingbar</item>

                <item name="android:minHeight">16dip</item>
                <item name="android:maxHeight">16dip</item>
</style>
</resources>

SOURCE CODE [custom_ratingbar.xml] is

<?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/custom_ratingbar_empty" />

    <item android:id="@+android:id/secondaryProgress"

android:drawable="@drawable/custom_ratingbar_empty" />

    <item android:id="@+android:id/progress"

android:drawable="@drawable/custom_ratingbar_filled" />

</layer-list>

SOURCE CODE [custom_ratingbar_filled.xml] is

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_pressed="true"

android:state_window_focused="true"

android:drawable="@drawable/star_on" />

<item android:state_focused="true"

android:state_window_focused="true"

android:drawable="@drawable/star_on" />

<item android:state_selected="true"

android:state_window_focused="true"

android:drawable="@drawable/star_on" />

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

</selector>

SOURCE CODE [custom_ratingbar_empty.xml] is

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
               
<item android:state_pressed="true"

android:state_window_focused="true"

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

<item android:state_focused="true"

android:state_window_focused="true"

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

<item android:state_selected="true"

android:state_window_focused="true"

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

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

</selector>

SOURCE CODE [CustomRatingBarExample.java] is

package Com.CustomRatingBarExample;

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

public class CustomRatingBarExample extends Activity
{
               
                RatingBar rb;

public void onCreate(Bundle savedInstanceState)

{

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

rb = (RatingBar) findViewById(R.id.ratingbar);

rb.setRating(3.5f);

}

}

Note:

Save the file [styles.xml] in values folder. This folder already has a file [strings.xml].
Save the files [custom_ratingbar.xml], [custom_ratingbar_filled.xml], [custom_ratingbar_empty.xml] in drawable folder.
Save the images [custom ratings icon – star_on.png, star_off.png] in the drawable folder.







The OUTPUT will be