Spacing between the stars of a rating bar?
I have similar problem but I didn't find solution to make it without changes of images.
Maybe someome faced with such problem and solved it.
Thanks in advance.
Create a custom style that uses your own images with different spacing between them.
Use it in a layout like this:
<RatingBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/RatingBarLarge"/>
Define the style like this:
<style name="RatingBarLarge">
<item name="android:progressDrawable">#drawable/ic_rating_star_large</item>
<item name="android:minHeight">29dp</item>
</style>
Set the minHeight to whatever the height of your drawable is.
Then, define ic_rating_star_large as a layer list like this:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#android:id/background"
android:drawable="#drawable/ic_rate_star_large_off" />
<item
android:id="#android:id/secondaryProgress"
android:drawable="#drawable/ic_rate_star_large_off" />
<item
android:id="#android:id/progress"
android:drawable="#drawable/ic_rate_star_large_on" />
</layer-list>
Are you using this same kind of code for your rating bar?
// ?android:attr/ratingBarStyle- normal star
// ?android:attr/ratingBarStyleSmall - small star
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:background="#android:drawable/toast_frame">
<RatingBar android:layout_width="wrap_content"
android:layout_height="wrap_content" style="?android:attr/ratingBarStyle"
android:id="#+id/ratingbar_default"
android:layout_marginTop="5dp"
android:layout_marginLeft="-8dp"
/>
</RelativeLayout>
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'm using the following code for rating bar.
<RatingBar
android:id="#+id/ratingBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:stepSize="1.0"
android:background="#color/yellow"/>
The problem is that I'm unable to change the color of stars in rating bar. Even when i tried setting background. How can I change the color of star?
Try it....
android:progressTint="#color/color"
or
you can use it...
Use android:theme attribute:
styles.xml
<style name="Theme.Rating" parent="Theme.AppCompat.Light">
<item name="colorAccent">#color/rating</item>
</style>
layout.xml
<android.support.v7.widget.AppCompatRatingBar
android:theme="#style/Theme.Rating"
android:numStars="5"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
i would suggest create three star images yello_full.png, yellow_half.png and yellow_empty.png . now put these images in drawable folder.
Create a xml file in drawable and put this code
<?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/yellow_empty" />
<item
android:id="#android:id/secondaryProgress"
android:drawable="#drawable/yellow_half" />
<item
android:id="#android:id/progress"
android:drawable="#drawable/yello_full" />
</layer-list>
now in your rating bar add this
<RatingBar
android:progressDrawable="#drawable/ratingbar_yellow"/>
and here you go.. Enjoy coding
Instead of creating drawables you can change it by setting color filter.
Example
ratingWidget.getProgressDrawable().setColorFilter(color, PorterDuff.Mode.SRC_ATOP);
Here color is the color you want to set to the widget.
I want to change colour of RatingBar stars in every mode(highlighted, notHighlited, progress), but I already use style Widget.AppCompat.RatingBar.
I don't want to change style cause, I like star shapes and staff, I only want to change star colors, Is it possible?
Here's my code:
<RatingBar
android:id="#+id/ratingBar"
style="#style/Widget.AppCompat.RatingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="5"
android:stepSize="1.0"
android:layout_gravity="center_horizontal"
android:rating="0.0" />
Use styles:
<?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/background" />
<item android:id="#android:id/secondaryProgress" android:drawable="#drawable/secondary_progress" />
<item android:id="#android:id/progress" android:drawable="#drawable/progress" />
</layer-list>
You can use this style following way. Add this line to the RatingBar:
android:progressDrawable="#drawable/rating"
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
Currently I'm developing an app which uses the RatingBar. I accidentally changed some styling values and now my RatingBar has some kind of stroke on it.
1 http://qs.lc/3ns3n
Like this.
I know this is a really silly question but I just can't remove it haha. Thank you!
<RatingBar android:layout_width="146dp"
android:layout_height="wrap_content"
style="?android:attr/ratingBarStyleSmall"
android:id="#+id/card_main_inner_ratingbar"
android:stepSize="1" android:numStars="10" />
I had the same problem and I solved it by setting the layout_width and the layout_height with only wrap_content
Create a selector file in the drawable folder:
custom_ratingbar_selector.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_off" />
<item android:id="#android:id/secondaryProgress"
android:drawable="#drawable/star_off" />
<item android:id="#android:id/progress"
android:drawable="#drawable/star_on" />
</layer-list>
In the layout set the selector file as progressDrawable:
<RatingBar
android:id="#+id/ratingBar2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp"
android:progressDrawable="#drawable/custom_ratingbar_selector"
android:numStars="8"
android:stepSize="0.2"
android:rating="3.0" />
And that's all we need.
If it was the same case for you just use:
<androidx.appcompat.widget.AppCompatRatingBar
...
android:secondaryProgressTint="YOUR_COLOR_HERE"/>
Before:
After: