.
I create a custom rating bar. I set 5 custom star images, but it shows only one. Instead of a variable number of rating drawables, I see only one, regardless of the number of stars set. Any help will be appreciated.
xml.code :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<RatingBar
android:id="#+id/ratingbar_default"
style="#style/RatingBar"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_marginBottom="20dp" />
<TextView
android:id="#+id/textView"
android:layout_width="276dp"
android:layout_height="wrap_content"
android:gravity="center"
android:text="show state up checkbox"
android:textColor="#CC00CC"
android:textSize="20dp" />
java code :
Activity RatingBarActivity
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_rating);
final TextView text = (TextView) findViewById(R.id.textView);
final RatingBar ratingBar_default = (RatingBar) findViewById(R.id.ratingbar_default);
ratingBar_default.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener()
{
#Override
public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser)
{
// TODO Auto-generated method stub
text.setText("Rating: " + String.valueOf(rating));
}
});
<?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_ratingbar_full_empty" />
<item
android:id="#android:id/secondaryProgress"
android:drawable="#drawable/star_ratingbar_full_empty" />
<item
android:id="#android:id/progress"
android:drawable="#drawable/star_ratingbar_full_filled" />
</layer-list>
res/drawable/star_ratingbar_full_empty.xml:
<?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/star2" />
<item android:state_focused="true"
android:state_window_focused="true"
android:drawable="#drawable/star2" />
<item android:state_selected="true"
android:state_window_focused="true"
android:drawable="#drawable/star2" />
<item android:drawable="#drawable/star2" />
</selector>
res/drawabstar_ratingbar_full_filled.xml:
<?xml version="1.0" encoding="utf-8"?>
<!-- This is the rating bar drawable that is used to
show a unfilled cookie. -->
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:state_window_focused="true"
android:drawable="#drawable/star3" />
<item android:state_focused="true"
android:state_window_focused="true"
android:drawable="#drawable/star1" />
<item android:state_selected="true"
android:state_window_focused="true"
android:drawable="#drawable/star1" />
<item android:drawable="#drawable/star1" />
</selector>
styles.xml file :
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"></style>
<style name="RatingBar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/star_rating_bar_full</item>
<item name="android:minHeight">48dip</item>
<item name="android:maxHeight">48dip</item>
</style>
</resources>
In my case trouble was in SVG drawables in layer-list. When I changed them to PNG it starts work correctly
Try to specify an android:numStars attribute for your RatingBar in layout file activity_rating.xml. I guess, the default value is 1 - that's why you see only one star
Just remove any-dpi drawable of rating bar filled and empty image from drawable. And it will work for you. Because it to show custom rating bar you can give both xml and png files in your layer list. But to show all the stars, you have to put only png icons into drawable folder.
Has been a while but never hurts to answer.
Here is my 3 step solution regardless of SDK version.
1- Add this as your RatingBar in your xml layout:
<RatingBar
android:id="#+id/new_ratingbar"
android:progressDrawable="#drawable/custom_drawable"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="5"
android:stepSize="0.5"/>
If needed, you can give the RatingBar minHeight and maxHeight or add other attributes as required.
2- Here is the drawable you would refer the above android:progressDrawable to:
custom_drawable.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/rating_bar_empty" /> <!--this is your .png file-->
<item
android:id="#android:id/secondaryProgress"
android:drawable="#drawable/rating_bar_fill" /> <!--this is your .png file-->
<item
android:id="#android:id/progress"
android:drawable="#drawable/rating_bar_fill" /> <!--this is your .png file-->
</layer-list>
3- The last thing is to provide the .png files in your various drawable folders.
Related
I followed an answer on stack overflow to adding a custom rating bar to an android project, here it is: https://stackoverflow.com/a/32828726/5909396
Just in case I am posting my code.
First I created ratingBar.xml in 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/ratingbar_empty" />
<item android:id="#android:id/secondaryProgress"
android:drawable="#drawable/ratingbar_empty" />
<item android:id="#android:id/progress"
android:drawable="#drawable/ratingbar_filled" />
Then I created ratingbar_empty.xml and ratingbar_filled.xml also in drawable folder:
<?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/ic_emptyStar" />
<item android:state_focused="true"
android:state_window_focused="true"
android:drawable="#drawable/ic_emptyStar" />
<item android:state_selected="true"
android:state_window_focused="true"
android:drawable="#drawable/ic_emptyStar" />
<item android:drawable="#drawable/ic_emptyStar" />
<?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/ic_fullStar" />
<item android:state_focused="true"
android:state_window_focused="true"
android:drawable="#drawable/ic_fullStar" />
<item android:state_selected="true"
android:state_window_focused="true"
android:drawable="#drawable/ic_fullStar" />
<item android:drawable="#drawable/ic_fullStar" />
And then I created the custom style in styles.xml
<style name="CustomRatingBar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/ratingbar</item>
<item name="android:minHeight">50dp</item>
<item name="android:maxHeight">50dp</item>
</style>
And finally I added a ratingBar to layout. The way I structured it is the rating bar is inside a relative layout and there is a textview inside the relative layout as well that is on top of the rating bar (The text view shows if there is no rating);
<RelativeLayout
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="0.4"
android:orientation="vertical"
android:layout_gravity="center">
<RatingBar
android:id="#+id/ratingRestaurant"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/CustomRatingBar"
android:numStars="5"
android:stepSize="0.1"
android:isIndicator="true"
android:max="5"
android:progress="3"
android:layout_centerVertical="true"
android:progressTint="#ffe4b331" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="No rating available"
android:textColor="#android:color/white"
android:textSize="11dp"
android:id="#+id/textViewNoRatingAvailable" />
</RelativeLayout>
When I run the application on the simulator, the stars are really large and are cut-off like below:
There are supposed to be five stars. How can i fix this problem?
I made a library with a customizable rating bar. You can set full and empty icon and their size. I hope this helps you.
This is an example of the usage, is very simple:
<com.kabuki5.logicalratingbar.CustomRatingBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:clickable="true"
app:iconSize="58dp"
app:imageEmpty="#drawable/ic_heart_empty"
app:imageFull="#drawable/ic_heart_full"
app:initRating="5"
app:maxItems="5" />
Also you can set a listener to get on change value callback.
Logical Rating Bar
set
android:layout_width="wrap_content"
android:layout_height="0dp"
I'm developping an Android app, which use a custom RatingBar. I've follow a tutorial (http://kozyr.zydako.net/2010/05/23/pretty-ratingbar/), but when I use my custom style, it always shows me 5 stars, even I force the RatingBar to a value (Ex 3 stars). I verified on the web with some others tutorials, but it doesn't change anything..
My files :
custom_ratingbar_full.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/background"
android:drawable="#drawable/custom_ratingbar_full_empty" />
<item android:id="#+id/secondaryProgress"
android:drawable="#drawable/custom_ratingbar_full_empty" />
<item android:id="#+id/progress"
android:drawable="#drawable/custom_ratingbar_full_filled" />
</layer-list>
custom_ratingbar_full_empty.xml
<?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>
custom_ratingbar_full_filled.xml
<?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_full" />
<item android:state_focused="true"
android:state_window_focused="true"
android:drawable="#drawable/star_full" />
<item android:state_selected="true"
android:state_window_focused="true"
android:drawable="#drawable/star_full" />
<item android:drawable="#drawable/star_full" />
</selector>
styles.xml
<style name="CustomRatingBar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/custom_ratingbar_full</item>
<item name="android:minHeight">48dip</item>
<item name="android:maxHeight">48dip</item>
</style>
my_fragment.xml
...
<RatingBar
android:id="#+id/rating_bar"
style="#style/CustomRatingBar"
android:layout_width="wrap_content"
android:layout_height="60dp"
android:isIndicator="true"
android:layout_marginBottom="10dp"
android:visibility="invisible" />
...
Any explanations ? I've search what I've done wrong, but I don't find it..
EDIT :
How I set my rating value :
I send a bundle between Fragments
myRating = bundle.getInt("rating");
I retrieve the RatingBar :
RatingBar ratingBar = (RatingBar) rootView.findViewById(R.id.rating_beer);
And finnaly I test the value to show or not the rating bar :
if (beerRating != 0) {
ratingBar.setRating(myRating);
ratingBar.setVisibility(View.VISIBLE);
Toast.makeText(getActivity(), "Rating : " + myRating, Toast.LENGTH_LONG).show();
}
I have verified my value, and it doesn't show me the correct number of stars. But if I remove my custom style from the rating bar, it works.
EDIT 2 SOLUTION :
Finally I found the solution : I have replaced tags #+android:id by #+id, and this is why it didn't work.
I was having the same problem. I downloaded the code and the items in the custom rating bar file were like this
<item
android:id="#+android:id/background"
android:drawable="#drawable/star_blank"/>
to remove the error I changed the id to
<item
android:id="#+id/background"
android:drawable="#drawable/star_blank"/>
which removed the error but it was only showing the selected items stars but the rating bar value was changing.
So I changed id in custom rating bar to
<item
android:id="#android:id/background"
android:drawable="#drawable/star_blank"/>
which worked perfectly.
Try this , Set the progress drawable as a property of rating bar,
<RatingBar
android:numStars="5"
android:progressDrawable="#drawable/ratingbar_selector"
android:stepSize="0.2" />
Hi I am using custom rating bar with custom images. I need to provide space between stars. When I increase minimum height and maximum height, star image remains same.
<RelativeLayout
android:id="#+id/RelativeLayout01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:padding="5dp">
<TextView
android:id="#+id/allreviews"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Rating"
android:layout_marginLeft="8dp"
android:textSize="14sp" />
<RatingBar
android:id="#+id/reviewallrating"
style="#style/customRatingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="3dp"
android:layout_toRightOf="#+id/allreviews"
android:isIndicator="false"
android:numStars="5"
android:stepSize="0.1" />
</RelativeLayout>
styles:
#drawable/star_rating_bar_full
12dip
12dip
star_rating_bar_full.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_ratingbar_full_empty" />
<!-- <item android:id="#+android:id/secondaryProgress"
android:drawable="#drawable/star_ratingbar_full_empty" /> -->
<item android:id="#+android:id/progress"
android:drawable="#drawable/star_ratingbar_full_filled" />
</layer-list>
star_ratingbar_full_empty:
<?xml version="1.0" encoding="utf-8"?>
<!-- This is the rating bar drawable that is used to
show a filled cookie. -->
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:state_window_focused="true"
android:drawable="#drawable/star_gray" />
<item android:state_focused="true"
android:state_window_focused="true"
android:drawable="#drawable/star_gray" />
<item android:state_selected="true"
android:state_window_focused="true"
android:drawable="#drawable/star_gray"/>
<item android:drawable="#drawable/star_gray" />
</selector>
star_ratingbar_fullfilled.xml:
<item android:state_pressed="true"
android:state_window_focused="true"
android:drawable="#drawable/yellow_star" />
<item android:state_focused="true"
android:state_window_focused="true"
android:drawable="#drawable/yellow_star" />
<item android:state_selected="true"
android:state_window_focused="true"
android:drawable="#drawable/yellow_star" />
<item android:drawable="#drawable/yellow_star" />
I used style="?android:attr/ratingBarStyle" in styles but still output remains same.
You could simply add some empty space to the left and right sides of your PNGs.
That is, increase the width of the grey and yellow PNGs in GIMP (or whatever graphic editor program you use).
Just the canvas, without stretching the star icon.
If you are using Drawable for the stars. Make sure your drawable have some left padding according to your requirement in the png image.
Otherwise through code its not working. Some days back I stuck with the same problem. I gone through by using the left padded image. Hope it will work.
So I have created a rating bar with new icons, however, when I implement it, the stars look like they are bleeding, see attached:
Here are the style, rating xml, and how they are implemented in the layout:
style:
<style name="GoldRatingBar" parent="#android:style/Widget.RatingBar">
<item name="android:indeterminateOnly">false</item>
<item name="android:progressDrawable">#drawable/gold_ratingbar</item>
<item name="android:indeterminateDrawable">#drawable/gold_ratingbar</item>
<item name="android:thumb">#null</item>
<item name="android:isIndicator">true</item>
</style>
rating 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/rating_star_icon_off" />
<item android:id="#+android:id/secondaryProgress" android:drawable="#drawable/rating_star_icon_half" />
<item android:id="#+android:id/progress" android:drawable="#drawable/rating_star_icon" />
</layer-list>
Layout:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="Overall rating"
android:textSize="16sp"
android:textStyle="bold" />
<RatingBar
android:id="#+id/review_overall_rating"
style="#style/GoldRatingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="6dp"
android:layout_marginLeft="6dp"
android:rating="3" />
<TextView
android:id="#+id/review_rating_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text=""
android:textStyle="bold" />
Can anyone see where I have gone wrong?
i had a similar case
and the accepted answer will not resolve it on all screen sizes
in fact the solution is very simple,
you just need to add padding to the .png image that you are using
"2 transparent pixels on each side "
the bleeding ocures because android is repeating the last row of your star image so just make this row transparent
For all who are still looking for an answer and don't want to crop the image: android:minHeight="0dp" helped me
Update.
Why is it working? Well, most of all view components have a default min size to follow accessibility/usability google guidelines. And as was mentioned, seems like RatingBar tries to fill the empty space (diff between your own resource and minHeight) by repeating the last 1-2 pixels (personally I don't understand the reason of such desicion). So by setting the android:minHeight="0dp", RatingBar will wrap content by the height of your resource.
I had facing same problem.
In my case blank_star.png height is 17dp so i put android:layout_height="17dp" on RatingBar and my problem is resolve.Try below code:-
<RatingBar
android:id="#+id/rating"
style="#style/rating_bar"
android:layout_width="wrap_content"
android:layout_height="17dp"
android:layout_marginRight="5dp"
android:isIndicator="true"
android:numStars="5"
android:stepSize="1.0" />
style/rating_bar.xml
<style name="rating_bar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/rating_bar_full</item>
<item name="android:minHeight">18dip</item>
<item name="android:maxHeight">18dip</item>
</style>
drawable/rating_bar_full
<?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/ratingbar_full_empty"/>
<item
android:id="#+android:id/secondaryProgress"
android:drawable="#drawable/ratingbar_full_empty"/>
<item
android:id="#+android:id/progress"
android:drawable="#drawable/ratingbar_full_filled"/>
</layer-list>
drawable/ratingbar_full_empty
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/blank_star" android:state_pressed="true" android:state_window_focused="true"/>
<item android:drawable="#drawable/blank_star" android:state_focused="true" android:state_window_focused="true"/>
<item android:drawable="#drawable/blank_star" android:state_selected="true" android:state_window_focused="true"/>
<item android:drawable="#drawable/blank_star"/>
</selector>
drawable/ratingbar_full_filled.xml
<item android:drawable="#drawable/filled_star" android:state_pressed="true" android:state_window_focused="true"/>
<item android:drawable="#drawable/filled_star" android:state_focused="true" android:state_window_focused="true"/>
<item android:drawable="#drawable/filled_star" android:state_selected="true" android:state_window_focused="true"/>
<item android:drawable="#drawable/filled_star"/>
The bleeding occurs because the last row of your star image is being repeated. You could fix this by setting the size of the RatingBar to perfectly match the underlying drawable.
The RatingBar never inspects the size of the underlying drawable. So you have to do this yourself. It can be difficult to do this using xml, since your assets may have different sizes for different screen densities. Plus your UX people may change the assets without updating the xml dimensions.
Solution: create a RatingBar that checks the size of its drawables. See below
public class RatingBar extends android.widget.RatingBar {
private Drawable starDrawable;
public RatingBar(Context context) {
this(context, null);
}
public RatingBar(Context context, AttributeSet attrs) {
super(context, attrs);
starDrawable = getResources().getDrawable(
R.drawable.your_drawable, context.getTheme());
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// Make sure to account for padding and margin, if you care.
// I only cared about left padding.
setMeasuredDimension(starDrawable.getIntrinsicWidth() * 5
+ getPaddingLeft(), starDrawable.getIntrinsicHeight());
}
}
I've made a ratingbar in my app which uses a custom style, using my own stars.
My ratingbar is defined as followed:
<RatingBar
android:layout_width="wrap_content"
android:layout_height="15dp"
android:id="#+id/ratingBar"
android:numStars="10"
android:stepSize="1"
android:rating="10"
android:layout_marginTop="5dp"
android:layout_below="#id/feedbackTable"
android:layout_toRightOf="#id/ratingText"
android:layout_marginLeft="5dp"
style="#style/starBar" />
The style that I use in styles.xml is:
<style name="starBar" 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>
With ratingstars.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/background" android:drawable="#drawable/ratingstars_full_empty" />
<item android:id="#+id/secondaryProgress" android:drawable="#drawable/ratingstars_full_empty" />
<item android:id="#+id/progress" android:drawable="#drawable/ratingstars_full_filled" />
</layer-list>
When I adjust the android:rating it shows the correct amount of stars filled and being empty in the preview. However, using my emulator or real device the bar stays completely filled with stars (10/10). I've tried adjusting it programmatically by using the following piece of code:
ratingbar.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {
public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) {
Log.d("rating", rating+"");
ratingbar.setRating(rating);
}
});
Now the log from logcat shows actually that rating IS changed, but the bar does not visually update itself with e.g. 6 stars being full, and 4 empty and I have no clue why.
The drawables are correct as the preview also shows it correct, so what can cause this?
Edit:
This is ratingstars_full_filled.xml
<?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" />
<item android:state_focused="true"
android:state_window_focused="true"
android:drawable="#drawable/star" />
<item android:state_selected="true"
android:state_window_focused="true"
android:drawable="#drawable/star" />
<item android:drawable="#drawable/star" />
</selector>
And here is ratingstars_full_empty.xml
<?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_empty" />
<item android:state_focused="true"
android:state_window_focused="true"
android:drawable="#drawable/star_empty" />
<item android:state_selected="true"
android:state_window_focused="true"
android:drawable="#drawable/star_empty" />
<item android:drawable="#drawable/star_empty" />
</selector>
You should change the id attribute in ratingstars.xml from "#+id/..." to "#android:id/...", since the resource is part of the android system, and already defined in the default android progress drawable.
<?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/ratingstars_full_empty" />
<item android:id="#android:id/secondaryProgress" android:drawable="#drawable/ratingstars_full_empty" />
<item android:id="#android:id/progress" android:drawable="#drawable/ratingstars_full_filled" />
</layer-list>
It looks like it's not a problem with the listener being called, but rather just the custom android:progressDrawable style attribute you're applying to it. My guess is that the drawable you're using is doing unexpected things. Try removing style="#style/starBar" from your RatingBar and see if things are working as expected. If so, that's your problem