Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android custom RatingBar image artifacts

I implemented a custom RatingBar in an application on my ListView items. Custom style ratingbar_red.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_on" />
    <item android:id="@android:id/progress" android:drawable="@drawable/star_on" />
</layer-list>

Here's part of ListItem layout:

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:paddingLeft="15dp" >

    <RatingBar
        android:id="@+id/li_company_rating"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:layout_marginBottom="1dp"
        android:isIndicator="true"
        android:numStars="5"
        android:progressDrawable="@drawable/ratingbar_red"
        android:stepSize="1" />

    <Button
        android:id="@+id/li_company_callbtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="0dp"
        android:layout_marginLeft="40dp"
        android:contentDescription="@string/ContentDescription"
        android:drawableLeft="@drawable/phone_icon"
        android:drawablePadding="5dp"
        android:onClick="callbtn_Click"
        android:text="@string/CallButton"
        android:focusable="false"
        android:focusableInTouchMode="false" >
    </Button>

</LinearLayout>

It works, but when the rating is set, I get some strange image artifacts; 2 vertical lines below the pink stars appear on my view:

enter image description here

Here is star_on.png

link

star_off.png looks okay, and if rating == 0, the lines don't appear.

I'm android beginner, and can't understand what the problem is.

like image 760
Sash0k Avatar asked Feb 20 '12 05:02

Sash0k


4 Answers

Try giving height to RatingBar in xml layout like this:

android:layout_height="30dp" 

30dp or whatever suits you..

Check out why is this happening ??

like image 86
Adil Soomro Avatar answered Sep 27 '22 21:09

Adil Soomro


I had this issue to, looked like the bottom edge of custom star image being stretched. You don't have to set the layout_height of rating bar tag. You can set the min/max height on the rating bar (to same as image height).

Example from my styles xml.

<style name="GoldRatingBar" parent="@android:style/Widget.RatingBar">
  <item name="android:minHeight">@dimen/rating_bar_height</item>
  <item name="android:maxHeight">@dimen/rating_bar_height</item>
</style>

Dimens.xml

<dimen name="rating_bar_height">11dp</dimen>

The value should match that of the drawable used. 11 pixel high image, so the rating_bar_height was set to 11dp.

like image 32
scottyab Avatar answered Sep 27 '22 22:09

scottyab


Another simple solution woud be to leave a row of empty pixels in the star image using an image editor like photoshop. Then the repeated or stretched row of pixels in the ratingbar would be empty. This aproach solved my issue.

like image 31
evis Avatar answered Sep 27 '22 21:09

evis


I solved this problem in another way. I take my custom star png's, and in image editor add transparent line to the bottom of the image. The problem with vertical lines disappeared on all screens!

like image 24
G. Kh. Avatar answered Sep 27 '22 20:09

G. Kh.