ratingbar with custom images

Question

Is it possible to create a custom rating bar like this? If yes, can you give me an example on how to do it?

Thanks in advance!

Answer 1

EDIT: This is not an appropriate answer, as OP wanted to customize RatingBar. But it is still a solution.

It is possible. You just have to put each one of the five image resources in your project and then, make a layout like this:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="60dp"
android:layout_height="match_parent"
android:background="@android:color/black"
android:gravity="left"
android:orientation="vertical"
android:weightSum="5" >

<ImageView
    android:id="@+id/oneStar"
    android:layout_width="50dp"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:src="@drawable/ic_launcher" />

<ImageView
    android:id="@+id/twoStars"
    android:layout_width="50dp"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:src="@drawable/ic_launcher"
    android:visibility="visible" />

<ImageView
    android:id="@+id/threeStars"
    android:layout_width="50dp"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:src="@drawable/ic_launcher"
    android:visibility="visible" />

<ImageView
    android:id="@+id/fourStars"
    android:layout_width="50dp"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:src="@drawable/ic_launcher"
    android:visibility="visible" />

<ImageView
    android:id="@+id/fiveStars"
    android:layout_width="50dp"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:src="@drawable/ic_launcher"
    android:visibility="visible" />

Put your resources as source of your ImageViews. That should be a start for you :D

Answer 2

Great tutorial here.

I will copy important parts in this answer in case the link will be invalid.

First you should create a style which extends the original RatingBar

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="foodRatingBar" parent="@android:style/Widget.RatingBar">
        <item name="android:progressDrawable">@drawable/food_ratingbar_full</item>
        <item name="android:minHeight">48dip</item>
        <item name="android:maxHeight">48dip</item>
    </style>
</resources>

Then you need to provide 3 drawables, why? Because you should fill the 3 cases: empty, 50% and full.

This file will be food_ratingbar_full.xml

> Here’s an example of a filled rating (cookie):

<!-- This is the rating bar drawable that is used to
show a filled cookie. -->
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true"
          android:state_window_focused="true"
          android:drawable="@drawable/cookie" />

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

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

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

</selector>

I just use one image for all states (and it actually looks decent), but as you can see from the selector, there are four different states possible (@drawable/cookie is finally an actuall cookie png image). And the cool thing here is that RatingBar component will automatically fill in part of the cookie when needed based only on “full” and “empty” images (if you support half ratings, as in my example image).

Then to use your style you should just add style attribute in RatingBar XML.

style="@style/foodRatingBar

The point is: you should create a custom style if you want.

---

Then you could use setRotation to rotate it.

Sets the degrees that the view is rotated around the pivot point. Increasing values result in clockwise rotation.