Android: Custom RatingBar - Images do not fit

Question

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.

Misplaced stars

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.

score 1 · Answer 1 · answered Jul 09 '15 at 07:33

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 :)

score 0 · Answer 2 · answered Jul 09 '15 at 05:13

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"/>

score 0 · Answer 3 · answered Dec 10 '21 at 12:07

0

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

answered Dec 10 '21 at 12:07

mazenqp

345
4
19

Android: Custom RatingBar - Images do not fit

3 Answers3