I have a custom RatingBar in my app that should display either the site average rating or the user rating for a movie if a user has rated it. The color should change depending on whether the rating displayed is the site average or a user rating.
Here's the process:
User views movie. Site average rating for the movie is displayed.
Layout code for the RatingBar:
<RatingBar android:id="#+id/ratingBar" android:isIndicator="true"
android:layout_margin="10dip" style="#style/RatingBar"
android:progressDrawable="#drawable/site_rating_bar" android:stepSize="0.1" />
RatingBar style:
<style name="RatingBar" parent="#android:style/Widget.RatingBar">
<item name="android:numStars">10</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:minHeight">30dip</item>
<item name="android:maxHeight">30dip</item>
</style>
site_rating_bar.xml:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+android:id/background"
android:drawable="#drawable/btn_rating_star_off" />
<item android:id="#+android:id/secondaryProgress"
android:drawable="#drawable/btn_rating_star_off" />
<item android:id="#+android:id/progress"
android:drawable="#drawable/btn_site_rating_star_on" />
</layer-list>
The user can click on the RatingBar and bring up a dialog where they can add their own custom rating of the movie. Upon close of the dialog, the code updates the rating displayed in the RatingBar above. I'd like to also change the ProgressDrawable so that the color of the stars changes to indicate the user has added a custom rating.
But when I try to set the ProgressDrawable programmatically it does update it so it's displaying the right color, but it only displays a single star, stretched across the screen.
ratingBar.setProgressDrawable(thisActivity.getResources().getDrawable(R.drawable.user_rating_bar));
user_rating_bar.xml:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+android:id/background"
android:drawable="#drawable/btn_rating_star_off" />
<item android:id="#+android:id/secondaryProgress"
android:drawable="#drawable/btn_rating_star_off" />
<item android:id="#+android:id/progress"
android:drawable="#drawable/btn_user_rating_star_on" />
</layer-list>
I've tried saving the original bounds and resetting them, but it didn't help:
Rect bounds = ratingBar.getProgressDrawable().getBounds();
ratingBar.setProgressDrawable(thisActivity.getResources().getDrawable(R.drawable.user_rating_bar));
ratingBar.getProgressDrawable().setBounds(bounds);
Also tried resetting the numStars in case it had gotten lost.
Any ideas greatly appreciated. TIA. :)
I'm going through this same thing right now...I can't for the life of me get it to work as expected through code, so I'm going the janky-layout route. :(
<RatingBar
android:id="#+id/beer_rating"
android:numStars="5"
android:progressDrawable="#drawable/rating_bar"
android:indeterminateDrawable="#drawable/rating_bar"
android:stepSize="0.5"
android:isIndicator="true"
android:layout_gravity="center"
style="?android:attr/ratingBarStyleSmall" />
<RatingBar
android:id="#+id/beer_rating_average"
android:indeterminateDrawable="#drawable/rating_bar_average"
android:isIndicator="true"
android:layout_gravity="center"
android:numStars="5"
android:progressDrawable="#drawable/rating_bar_average"
android:stepSize="0.5"
android:visibility="gone"
style="?android:attr/ratingBarStyleSmall"/>
Then just flipping the visibility on them when needed:
findViewById(R.id.beer_rating).setVisibility(View.GONE);
findViewById(R.di.beer_rating_average).setVisibility(View.VISIBLE);
Sucks, but it works. Let me know if you come up with any other solves.
Try using:
Use ProgressBar.setProgressDrawableTiled(Drawable)
and set minSDK to 21
Related
i tried to create a small rating bar something like this
<RatingBar
android:id="#+id/ratingBar"
style="?android:attr/ratingBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginTop="10dp"
android:numStars="5"
android:rating="3.5" />
and its working perfectly ,, now i need to replace star with custom image like this
<style name="CustomRatingBar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/ratingbar</item>
</style>
ratingbar.xml
<?xml version="1.0" encoding="utf-8"?>
<!--suppress AndroidDomInspection -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+android:id/background"
android:drawable="#drawable/ic_love_empty" />
<item android:id="#+android:id/secondaryProgress"
android:drawable="#drawable/ic_love_empty" />
<item android:id="#+android:id/progress"
android:drawable="#drawable/ic_love_fill" />
</layer-list>
the problem here is with the rating bar size ,, its very big and cropped how i can replace #android:style/Widget.RatingBar with this ?android:attr/ratingBarStyleSmall ,, or if any other solution or library its ok for me but i need small
I once had a problem like yours whereby android seems not to consider the resizing of rating bars. All the styles I applied was not small enough to my use case. I ended up using the third party libraries.
The first one or The second one These libraries will help you resizing the rating bars. Because android parent styles of rating bars are hard to resize and do not have default implementation. Happy Coding!
Set your parent style to #style/Widget.AppCompat.RatingBar.Small instead.
I am having a bit of a problem when setting a custom rating bar in android. I have followed this tutorial:
How to create Custom Ratings bar in Android
However I am experiencing an issue when changing/selecting more than 4 stars. The selected star image is misplaced a bit. Here is an image to show you what it looks like.
Here is my XML for creating the custom rating bar.
Main xml where the rating bar view is defined:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="10dp"
android:gravity="center" >
<RatingBar
android:id="#+id/ratingBar"
android:layout_width="wrap_content"
android:layout_height="19dp"
android:numStars="50"
android:stepSize="1.0"
style="#style/AppCustomRatingBar"/>
Custom style for the RatingBar
<style name="AppCustomRatingBar"
parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/rating_stars_custom</item>
<item name="android:minHeight">19dp</item>
<item name="android:maxHeight">19dp</item>
</style>
rating_stars_custom.xml
<item
android:id="#android:id/background"
android:drawable="#drawable/rating_stars_yellow_empty" />
<item android:id="#android:id/secondaryProgress"
android:drawable="#drawable/rating_stars_yellow_empty" />
<item
android:id="#android:id/progress"
android:drawable="#drawable/rating_stars_yellow_full" />
rating_stars_yellow_empty.xml
<?xml version="1.0" encoding="utf-8"?>
<item
android:id="#android:id/background"
android:drawable="#drawable/rating_stars_yellow_empty" />
<item android:id="#android:id/secondaryProgress"
android:drawable="#drawable/rating_stars_yellow_empty" />
<item
android:id="#android:id/progress"
android:drawable="#drawable/rating_stars_yellow_full" />
rating_stars_yellow_full.xml
<item android:state_pressed="true"
android:state_window_focused="true"
android:drawable="#drawable/home_icon_star_fill_selected" />
<item android:state_focused="true"
android:state_window_focused="true"
android:drawable="#drawable/home_icon_star_fill_selected" />
<item android:state_selected="true"
android:state_window_focused="true"
android:drawable="#drawable/home_icon_star_fill_selected" />
<item android:drawable="#drawable/home_icon_star_fill_selected" />
What am I doing wrong to misplace the stars? The image sizes of the stars (both yellow and white) are the same.
I managed to fix it. If you look at the picture I provided in my post above the yellow stars are like off with 1pix compared to empty stars. So I took a look at my pictures I use and their sizes. After that it appeared that the yellow star was 1pix shorter (in width) compared to the image with the empty star. So this was my problem I got new pictures of stars and I made sure they are the same size. Now I have 2 pictures 30x30 and all is OK! This fixed my problem! So my advice for people who are facing the same issue is to take a vary careful look at the size of the pictures they are using (empty/full) and make sure they are the same size. This way you save time and unnecessary coding. GL&HF :)
well I had the same problem with the rating bar. after doing some research I've found a way to overcome the above issue.
first, you need 2 stars, one empty star and one colored star. and size should be the same. (in my case both are 25x25)
then put this code in styles xml
<style name="redbar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/ratingbar_red</item>
<item name="android:minHeight">25dip</item>
<item name="android:maxHeight">25dip</item>
</style>
create another xml file called ratingbar_red.xml inside the 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_empty" />
<item android:id="#+android:id/secondaryProgress"
android:drawable="#drawable/star_empty" />
<item android:id="#+android:id/progress"
android:drawable="#drawable/star" />
</layer-list>
Finally crate your RatingBar like this.
<RatingBar
android:id="#+id/RatingBar05"
style="#style/redbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:isIndicator="false"
android:numStars="5"/>
this error || problem is actually related to the sizes of your images, Both have to be in the same size, the way I fixed this err is that I didn't remove the stoke or the border of the filled image, both images must have the same width and height
I'm creating an android app which needs rating bar to denote the progress of each level.
I've figured how to use rating bars both custom and default now i would like to add animation to the rating bar progress.
Whenever I set the number of stars (mean I've set android:isIndicator="true" using only for displaying to user not editable by him) it should do some animation like rotate and fill the bar.Please help me out with the code fragment I should use.
I've included code that i used for rating bar creation:
<RatingBar
android:id="#+id/ratingBar1"
style="#style/myRatingBar"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:numStars="5"
android:rating="3"
android:isIndicator="true" />
drawable/ratingstars.xml
<?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_empty" />
<item android:id="#+android:id/secondaryProgress"
android:drawable="#drawable/star_empty" />
<item android:id="#+android:id/progress"
android:drawable="#drawable/star" />
</layer-list>
values/styles.xml
<resources>
<style name="myRatingBar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/ratingstars</item>
<item name="android:minHeight">22dip</item>
<item name="android:maxHeight">22dip</item>
</style>
</resources>
please help me to add animation to rating when i use setRating(int) from activity
To animate the rating to a particular value, you can use a ObjectAnimator (API 11+).
Here's an example of animating a RatingBar from its current value to 5:
RatingBar myRatingBar = findViewById(R.id.my_rating_bar);
float current = myRatingBar.getRating();
ObjectAnimator anim = ObjectAnimator.ofFloat(myRatingBar, "rating", current, 5f);
anim.setDuration(1000);
anim.start();
For more information on how to animate properties of a View, read the Property Animation documentation.
I'm not sure what you are looking for in a rotate animation, but this should give you a good starting point for adding in the animations you need.
I'm trying to create a custom RatingBar for one of my apps. I've followed this tutorial: http://kozyr.zydako.net/2010/05/23/pretty-ratingbar/
The problem is that my RatingBar has always the same size and it's always filled. I try to show different ratings (0,1,2,3,4...) but the rating bar it's the same in all the cases...
I have the ratingBar:
<RatingBar
android:id="#+id/ratingBar"
style="#style/MyRatingBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:layout_marginRight="20dp"/>
My Style:
<style name="MyRatingBar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/rating_list</item>
<item name="android:minHeight">57dip</item>
<item name="android:maxHeight">57dip</item>
</style>
The layer-list:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#android:id/background"
android:drawable="#color/white_text" />
<item android:id="#android:id/secondaryProgress"
android:drawable="#color/white_text" />
<item android:id="#android:id/progress"
android:drawable="#color/red_circle" />
Thank you.
In your <RatingBar> use:
android:numStars to define how many red_circle are used for the full scale of the bar.
android:rating to set the default rating level.
android:stepSize to define the step size of your RatingBar.
<Edit>
I don't believe RatingBar is designed to work using a straight fill color as the progress drawable, which is what you have currently. A color has no dimensions, so drawing 2, 3 or 4 of them has no meaning.
It is designed to work with an image file like the default star png files.
Change your layer-list so the progress drawable points to a Bitmap, or 9Patch, and it works fine. <RatingBar> extends ProgressBar, which uses 9Patchs for the progress drawable.
I am trying to display an int value as a ratingBar. The max value is 5.
This is my XML file:
<RatingBar
android:id="#+id/ratBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:isIndicator="false"
android:numStars="5" />
But if I set the rating with setRating(), android draws a lot of stars. I can't figure out how many because my screen is too small.
Could anybody tell me what's wrong?
I couldn' t understand what exactly your problem is, but using RatingBar in Android applications is quite easy anyway. You need to define your RatingBar in a proper location;
<RatingBar
android:id="#+id/ratingBar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:isIndicator="true"
android:max="5"
android:numStars="3" />
get a reference to it, within your activity;
private RatingBar rb;
...
this.rb = (RatingBar) findViewById(R.id.ratingBar1);
and start to set values to fill the stars;
this.rb.setRating(2); , this.rb.setRating((float)2.5); etc.
If your screen is too small to display five stars, you can set the number of stars, just as I did above. And you have several options;
1) You can put two ratingbars one under the other one with 3 and the other with 2 stars. When your number exceeds 3, you can continue filling the 2 stars of the bottom ratingbar.
2) If possible, you can set float values instead of integers. So that you can set 1, 1.5, 2, 2.5, 3, 3.5, etc. and you can fill 3 stars for your interval 1-5 after a little algebra.
You need to define your own custom styles to achieve what you want for the RatingBar.
Try out creating the styles and apply that style in your RatingBar view.
Like this:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="foodRatingBar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/food_ratingbar_full</item>
<item name="android:minHeight">48dip</item>
<item name="android:maxHeight">48dip</item>
</style>
</resources>
<RatingBar android:id="#+id/my_rating_bar"
...
style="#style/foodRatingBar" />
Check out here for more details.
you can try this also
<RatingBar
android:id="#+id/ratingBar"
style="?android:attr/ratingBarStyleIndicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/artist"
android:layout_below="#+id/artist"
android:numStars="5"
android:rating="2.0"
android:stepSize="1.0" />
This happenswhen the drawable you set in your style for the rating bar has diffent size of png for background, secondary progress and progress.
Change it to something like
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background"
android:drawable="#android:color/transparent" />
<item android:id="#android:id/secondaryProgress"
android:drawable="#drawable/star_half" />
<item android:id="#android:id/progress"
android:drawable="#drawable/star_full" />