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());
}
}
Related
I want to create a control panel at the bottom of my screen that looks something like this.
Here is the image
And I want to simulate button press by having the clicked on item be blacked, and everything that isn't clicked be greyed out. As shown in the image, the picture icon had been clicked on.
At the moment, my solution is to overlay two rows of identical ImageViews. One layer consist of all black icons, and one layer consist of all grey icons. When I click on an image, I run a code that looks like this:
private void galleryClicked() {
mGalleryImageView_unclicked.setVisibility(View.INVISIBLE);
mPersonalImageView_unclicked.setVisibility(View.VISIBLE);
mExploreImageView_unclicked.setVisibility(View.VISIBLE);
mMenuImageView_unclicked.setVisibility(View.VISIBLE);
mGalleryImageView_clicked.setVisibility(View.VISIBLE);
mPersonalImageView_clicked.setVisibility(View.INVISIBLE);
mExploreImageView_clicked.setVisibility(View.INVISIBLE);
mMenuImageView_clicked.setVisibility(View.INVISIBLE);
}
I'm just wondering if there's a more efficient or better way of doing this. When I run this on my phone, and can feel some lag in the response. Thank you!
I have better solution, that is using selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/clicked" android:state_enabled="true" />
<item android:drawable="#drawable/unclicked" android:state_enabled="false" />
</selector>
so now you just set mGalleryImageView.setEnabled(true); or mGalleryImageView.setEnabled(false)
You can use Radiobuttons with RadioGroup, and each RadioButton has its own selector Drawable. Then the RadioGroup will take care of the selection for you (check one will uncheck all others).
Example code:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RadioGroup
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
<RadioButton
android:id="#+id/item_one"
style="#style/TabItem"
android:checked="true"
android:drawableTop="#drawable/selector_tab_item_one" />
<RadioButton
android:id="#+id/item_two"
style="#style/TabItem"
android:drawableTop="#drawable/selector_tab_item_two" />
<RadioButton
android:id="#+id/item_three"
style="#style/TabItem"
android:drawableTop="#drawable/selector_tab_item_three" />
<RadioButton
android:id="#+id/item_four"
style="#style/TabItem"
android:drawableTop="#drawable/selector_tab_item_four"/>
</RadioGroup>
</RelativeLayout>
Declare #style/TabItem in res/values/styles.xml:
<style name="TabItem" parent="android:style/Widget.Holo.Light.TextView">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_weight">1</item>
<item name="android:paddingTop">15dp</item>
<item name="android:drawablePadding">1dp</item>
<item name="android:button">#null</item>
<item name="android:background">#null</item>
<item name="android:gravity">bottom|center_horizontal</item>
</style>
The selector Drawable is like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/item_one_highlighted" android:state_checked="true"/>
<item android:drawable="#drawable/item_one_highlighted" android:state_pressed="true"/>
<item android:drawable="#drawable/item_one_default" />
</selector>
Results:
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 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 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.
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.