Android - Custom RatingBar Example - ANDROID - Helper

Sunday, June 19, 2011

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

 https://lh6.googleusercontent.com/-Of1zNlHcbe4/Tf7efZpeQJI/AAAAAAAAAJ0/00hnktman7E/custom_ratingbar.png

21 comments:

  1. Thank you so much for the tutorial.

    ReplyDelete
  2. Great tutorual, but how do I get a smaller or bigger style, without a new icon set and new xml files?

    ReplyDelete
  3. Great Bro,
    can we have an example, to give ratings to items and show high rated items in another activity using ListView

    ReplyDelete
  4. Its showing error,while using this code.
    error---error: Error retrieving parent for item: No resource found that matches the given name '@android:style/Widget.RatingBar.Small'.
    how i solve this error?
    my manifest.xml version is

    i checked my project properties also all are correct.
    i am using android 4.2 version

    ReplyDelete
  5. try another parent: http://stackoverflow.com/questions/10876532/android-adt-18-0-styles

    ReplyDelete
  6. How to bring this in dynamic control creation.

    ReplyDelete
  7. why don't you provide download button?

    ReplyDelete
  8. Thank you! Really helpful :)

    ReplyDelete
  9. may i know why the star is lock ? cannot change the rate

    ReplyDelete
  10. dont know why. did EXACTLY as written. showed nothing, empty where rating bar used to be. switched back to regular rating bar- its there...help :(((

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
  12. Did you download png files & put it on drawable folder ?

    ReplyDelete
  13. ok, finally got it to appear. now I've got a new problem- as in youre example the rating bar is in a vertical linear layout with a textView above it. no matter the height i set for the rating bar, wrap contnet, 50dp, and many more- it's always cut halfway in the emulator. if i put it in a layout with nothing above it- i get six stars and counting (i can see the beginning of another one that is cut width wise). and that's despite the 5 numStar i set...any suggestions?

    ReplyDelete
  14. .maybe you have rendering problems with you emulator theme. Try to change it otherwise set numstars with java code (not xml).

    ReplyDelete
  15. This information is impressive; I am inspired with your post writing style & how continuously you describe this topic. After reading your post, thanks for taking the time to discuss this, I feel happy about it and I love learning more about this topic.Android Training in chennai with placement | Android Training in velachery

    ReplyDelete