cut off image in ratingbar

Question

I made own ratingbar. There are 4 sizes of flowers images (xdpi, hdpi, etc) from 24pxx24px to 64x64px.

<?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/ic_rating_flowers_empty" />
    <item android:id="@+android:id/secondaryProgress"
          android:drawable="@drawable/ic_rating_flowers_empty" />
    <item android:id="@+android:id/progress"
          android:drawable="@drawable/ic_rating_flowers" />
</layer-list>

rating_flowers.xml in drawable floder

<style name="flowersRating" parent="@android:style/Widget.RatingBar">
    <item name="android:progressDrawable">@drawable/rating_flowers</item>
    <item name="android:minHeight">24dip</item>
    <item name="android:maxHeight">64dip</item>
</style>

in styles.xml

<TableRow
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="5dip" >

    <TextView
        android:text="@string/mood_headache" />

    <RatingBar
        android:id="@+id/moodHeadacheRating"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"    
        android:numStars="3"
        android:stepSize="1.0"
        android:rating="0" 
        style="@style/flowersRating" />

 </TableRow>

and activity

And what I see

What I see

and images from drawable-ldpi

enter image description here

score 3 · Answer 1 · answered Dec 15 '12 at 07:52

3

Try removing

android:padding="5dip"

from TableRow as it causes a padding just above the flower drawable.

answered Dec 15 '12 at 07:52

Lee Yi Hong

1,310
13
17

score 1 · Answer 2 · edited Jun 01 '14 at 00:35

1

In the XML of your rating bar change

android:layout_height="wrap_content"

to

android:layout_height="[some number]sp".

This will resolve the issue of cut off images.

DisplayMetrics can be used to get general information about a display and then figure out the appropriate units to use, but using an android unit converter is a lot simpler though.

edited Jun 01 '14 at 00:35

Bernhard Barker

54,589
14
104
138

answered Jun 01 '14 at 00:28

aleksandar

186
12

Mubarak · Answer 3 · 2019-01-04T07:21:32.393

Use the style as a ?android:attr/ratingBarStyleSmall

<RatingBar
android:id="@+id/rating"
style="?android:attr/ratingBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="5"
android:progressDrawable="@drawable/ratingbar_selector"
android:rating="2.0"
android:stepSize="1.0" />

and the custom rating bar selector will be: ratingbar_selector.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@android:id/background"
        android:drawable="@drawable/ic_unselected_star" />
    <item
        android:id="@android:id/secondaryProgress"
        android:drawable="@drawable/ic_unselected_star" />
    <item
        android:id="@android:id/progress"
        android:drawable="@drawable/ic_selected_star" />
</layer-list>

IMP Note: If Custom rating bar icon size is like 48x48, 50x50 etc then put the icon into xxhdpi folder(Because i used smaller(36x36) rating icon and that was creating same issue). then I used rating bar icon which size is 48x48.

score 0 · Answer 4 · answered Sep 29 '15 at 18:18

I ran into the exact same issue here. For me, the problem was not in the code, but in the images itself. In my case, the solution was to adjust the photos to manually be the sizes I wanted (IE 24x24 or 64x64) and put them into the right folders.

I tried multiple things, but it seems like the

<item name="android:minHeight">24dip</item>
<item name="android:maxHeight">64dip</item>

Bit of code for me would not do anything. Try resizing the images themselves and see if that fixes it.

-Sil

Luqman · Answer 5 · 2017-07-09T02:45:15.597

0

set android:layout_height="0dp"

https://stackoverflow.com/a/44992485/4238544

edited Jul 09 '17 at 02:45

answered Jul 09 '17 at 02:36

Luqman

139
2
6

Please See this first: [answering](https://stackoverflow.com/help/answering) and [how-to-answer](https://stackoverflow.com/help/how-to-answer) You can use comment if you want to suggest anything. – always-a-learner Jul 09 '17 at 03:11

cut off image in ratingbar

5 Answers5

Linked