Custom Android Rating Bar stretching image

Question

I'm having a little problem when using a custom rating bar style. I've read other topics on this, but the proposed solutions/answers are not solving the problem.

Android seems to be stretching part of the star image, creating this strange effect:

This strange effect is even visible in the graphical layout preview tool in eclipse:

The star "sprites" are: and

This is the custom style:

<style name="ratingBar" parent="@android:style/Widget.RatingBar">
    <item name="android:progressDrawable">@drawable/rating_bar</item>
    <item name="android:minHeight">@dimen/ratingBarHeight</item>
    <item name="android:maxHeight">@dimen/ratingBarHeight</item>
</style>

And this is the xml code in the layout:

<RatingBar
    android:layout_width="wrap_content"
    android:layout_height="@dimen/ratingBarHeight"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:numStars="5"
    android:stepSize="1.0"
    style="@style/ratingBar" />

The height is defined as follows:

<dimen name="ratingBarHeight">32dip</dimen>

Answer 1

I had the same problem. The reason was that my drawable was smaller than @dimen/ratingBarHeight, it was 22 pixels. Changing @dimen/ratingBarHeight to 22dip fixed it for me, the strange effect disappeared.