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

24 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. Thank you, it helped me a lot!

    ReplyDelete
  11. 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
  12. This comment has been removed by the author.

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

    ReplyDelete
  14. 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
  15. .maybe you have rendering problems with you emulator theme. Try to change it otherwise set numstars with java code (not xml).

    ReplyDelete
  16. 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
  17. Soma pill is very effective as a painkiller that helps us to get effective relief from pain. This cannot cure pain. Yet when it is taken with proper rest, it can offer you effective relief from pain.
    This painkiller can offer you relief from any kind of pain. But Soma 350 mg is best in treating acute pain. Acute pain is a type of short-term pain which is sharp in nature. Buy Soma 350 mg online to get relief from your acute pain.

    https://globalonlinepills.com/product/soma-350-mg/


    Buy Soma 350 mg
    Soma Pill
    Buy Soma 350 mg online



    Buy Soma 350 mg online
    Soma Pill
    Buy Soma 350 mg

    ReplyDelete