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.
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 trying to make custom RatingBar for my android app in which i can change the default size and color of RatingBar. For this purpose i have written styles for CustomRatingBar like this:
<style name="CustomRatingBar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/custom_ratingbar</item>
<item name="android:minHeight">25dp</item>
<item name="android:maxHeight">25dp</item>
</style>
But the size is not changed rather it shrinks the rating bar like this:
Drawable files are : custom_ratingbar.xml, custom_ratingbar_empty, custom_ratingbar_filled
In my xml, RatingBar looks like below:
<RatingBar
android:id="#+id/RatingBar"
style="#style/CustomRatingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:isIndicator="true"
android:numStars="5" />
How can i change the star size of the rating bar without shrinking it?
Just add below lines to your ratingBar in xml layout
android:scaleX="0.5"
android:scaleY="0.5"
Try this ,
custom rating bar style using android’s ratingBar small style.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="CustomRatingBar" parent="#android:style/Widget.RatingBar" >
<item name="android:numStars">5</item>
<item name="android:rating">4.5</item>
<item name="android:stepSize">0.5</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:paddingBottom">44dip</item>
<item name="android:layout_marginLeft">4dip</item>
<item name="android:layout_marginTop">4dip</item>
Check example. for the same.
Other solution is :
Android won't scale a rating bar icons. When you decrease the minHeight and maxHeight android will always crop the icons as shown on the picture. There seems to be the only one solution is to provide your own icons for stars with the desired dimensions and set the minHeight and maxHeight to the size of the icons.
I came across the same issue and even though this question is very old, I hope this will help someone who comes across this kind of scenario.
To increase the size of the stars in the rating bar we need to use android:scaleX and android:scaleY.
Please refer to the following example:
<RatingBar
android:id="#+id/ratingBar"
android:numStars="5"
android:rating="4"
android:isIndicator="true"
android:scaleX=".5"
android:scaleY=".5"
android:transformPivotX="0dp"
android:transformPivotY="0dp"
android:layout_marginBottom="-26dp"
android:layout_marginRight="-100dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:theme="#style/FoursquareReviewRating"/>
Also, you can find more details at https://en.proft.me/2017/06/18/decorating-ratingbar-android/
<..
android:scaleX=".6"
android:scaleY=".6"
//to avoid the unnecessary space
android:transformPivotX="0dp"
../>
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" />
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