• RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
Posted by Jack - - 22 comments

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

22 Responses so far.

  1. Thank you so much for the tutorial.

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

  3. amit suri says:

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

  4. ArtCH NK says:

    Great Tutorial ,Thanks

  5. karthick says:

    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

  6. estrip says:

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

  7. How to bring this in dynamic control creation.

  8. Raghu says:

    Excellent Dude......

  9. Mark Hall says:

    why don't you provide download button?

  10. Su Wai says:

    Thank you! Really helpful :)

  11. L.A.Z says:

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

  12. Thank you, it helped me a lot!

  13. 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 :(((

  14. This comment has been removed by the author.
  15. Did you download png files & put it on drawable folder ?

  16. 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?

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

  18. Saranya N says:

    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

  19. Unknown says:

    I am really happy with your blog because your article is very unique and powerful for new reader.
    Click here:
    Selenium Training in Chennai | Selenium Training in Bangalore | Selenium Training in Pune

Leave a Reply