custom rating bar drawables not overlapping properly

Question

I am creating custom rating bar.The problem is that drawables are not overlaying properly,because there are two different images with same hight and width.It should be like this when the progress will be updated the default image should be replaced by the image2. Any idea?

<RatingBar
        android:layout_weight="1"
        android:numStars="5"
        android:stepSize="1"
        android:progressDrawable="@drawable/customselector"
        android:layout_width="wrap_content"
        android:layout_height="0dp"/>

Here is my custom selector

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

    <item android:id="@android:id/secondaryProgress"
        android:drawable="@drawable/image1" />

    <item android:id="@android:id/progress"
        android:drawable="@drawable/image2" />

</layer-list>

Damn I wanted to experiment that, ufortunately I am on the process of updating my AS. and my internet slower than a Sea Urchin. did you see this already? http://stackoverflow.com/questions/5800657/how-to-create-custom-ratings-bar-in-android — Sheychan, Aug 11 '15 at 09:36
One last thing, your gray background drawable seems to be a mirror of the yellow activated rating.. Is this intended? Is it your intention that it is mirrored? because if not, you just have to mirror the drawable using some photoeditting softwares then boom — Sheychan, Aug 11 '15 at 09:41
In that case, what I can see is you should create an additional selector file in which the other one uses the mirrored/blank drawable when state activated is true, if you know what I mean. . . Still cant code arrrgh — Sheychan, Aug 11 '15 at 09:48

M0CH1R0N · Answer 1 · 2015-08-11T10:31:25.523

0

The way I set the selector to the RatingBar is a bit different, but I don't know if it will help:

<RatingBar
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/ratingBar"
    android:rating="3"
    android:numStars="5"
    android:stepSize="1"
    android:isIndicator="false"
    style="@style/mileageRatingBar"/>

In your values/styles.xml file put this:

<style name="mileageRatingBar" parent="@android:style/Widget.RatingBar">
    <item name="android:progressDrawable">@drawable/rating_stars</item>
    <item name="android:minHeight">32dip</item>
    <item name="android:maxHeight">32dip</item>
</style>

You can of course change the size. And as you can see here is the reference to the custom drawable.

edited Aug 11 '15 at 10:31

answered Aug 11 '15 at 09:34

M0CH1R0N

756
9
19

what is `mileageRatingBar` ? – Soham Aug 11 '15 at 09:40
That's the name of your selector file. Edited – M0CH1R0N Aug 11 '15 at 10:23
1

check this answer http://stackoverflow.com/questions/5800657/how-to-create-custom-ratings-bar-in-android – Mina Fawzy Aug 11 '15 at 10:34
what are sizes of image1 & image2 ? – Mina Fawzy Aug 11 '15 at 11:35
Second try make height equal wrap_content – Mina Fawzy Aug 11 '15 at 11:39
@minafawzy the images are 86*86.height equal wrap_content doesn't make any difference – Soham Aug 11 '15 at 13:25

score 0 · Answer 2 · answered Aug 12 '15 at 08:29

Remove

 android:progressDrawable="@drawable/customselector"

and add style in your values/styles.xml

to be like this

<RatingBar
        android:layout_weight="1"
        android:numStars="5"
        android:stepSize="1"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
       style="@style/customRatingBar"/>

your style from styles.xml

<style name="customRatingBar" parent="@android:style/Widget.RatingBar">
    <item name="android:progressDrawable">@drawable/customselector</item>
    <item name="android:minHeight">32dip</item>
    <item name="android:maxHeight">32dip</item>
</style>

the customselector.xml file must place 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/image1" />

    <item android:id="@android:id/secondaryProgress"
        android:drawable="@drawable/image1" />

    <item android:id="@android:id/progress"
        android:drawable="@drawable/image2" />

</layer-list>

make sure item id is written correctly , then you have two option to assign drawable as image or put your selector into your drawable folder selector.xml with your custom setting

instead of image1 put ratingbar_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/image1" />

    <item android:state_focused="true"
        android:state_window_focused="true"
        android:drawable="@drawable/image1" />

    <item android:state_selected="true"
        android:state_window_focused="true"
        android:drawable="@drawable/image1" />

    <item android:drawable="@drawable/image1" />

</selector>

the same to progress but change selector to image2

How to use the selector.xml file? – Soham Aug 18 '15 at 14:41 — Soham, Aug 18 '15 at 14:41

custom rating bar drawables not overlapping properly

2 Answers2