Decorating RatingBar in Android Android 18.06.2017

In Android, you can use android.widget.RatingBar to display rating bar component in stars icon. The user is able to touch, drag or click on the stars to set the rating value easily.

A RatingBar is an extension of AbsSeekBar and ProgressBar that shows a rating in stars.

Code for MainActivity.java file.

public class MainActivity extends AppCompatActivity {
    RatingBar ratingBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ratingBar = (RatingBar) findViewById(R.id.ratingBar);

        //ratingBar.setRating(5);
        //float rating = ratingBar.getRating();

        ratingBar.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {
            @Override
            public void onRatingChanged(RatingBar ratingBar, float v, boolean b) {
                Toast.makeText(MainActivity.this, String.valueOf(ratingBar.getRating()), 
                    Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Code for activity_main.xml layout file.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RatingBar
        android:id="@+id/ratingBar"
        android:numStars="5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:theme="@style/CustomRatingBar"/>
</RelativeLayout>

In layout for RatingBar you can set following attributes:

• android:isIndicator - whether this rating bar is an indicator (and non-changeable by the user).
• android:numStars - the number of stars (or rating items) to show.
• android:rating - the rating to set by default.
• android:stepSize - the step size of the rating.

Code for styles.xml layout file.

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="CustomRatingBar" parent="Theme.AppCompat">
        <item name="colorControlNormal">#80CBC4</item>
        <item name="colorControlActivated">#009688</item>
    </style>

</resources>

We can change drawable of RatingBar via progressDrawable.

Define in layout

<RatingBar
    android:id="@+id/ratingBar"
    android:numStars="5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    style="@style/CustomHeartsRatingBar"/>

Define CustomHeartsRatingBar in res/values/styles.xml.

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

Create ratingbar_hearts.xml 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/ratingbar_hearts_empty" />
    <item android:id="@+android:id/secondaryProgress"
          android:drawable="@drawable/ratingbar_hearts_half" />
    <item android:id="@+android:id/progress"
          android:drawable="@drawable/ratingbar_hearts_full" />
</layer-list>

Create ratingbar_hearts_empty.xml in drawable folder.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/heart_empty_pink" android:state_pressed="true" 
        android:state_window_focused="true"/>
    <item android:drawable="@drawable/heart_empty_pink" android:state_focused="true" 
        android:state_window_focused="true"/>
    <item android:drawable="@drawable/heart_empty_pink" android:state_selected="true" 
        android:state_window_focused="true"/>
    <item android:drawable="@drawable/heart_empty_pink"/>
</selector>

Create ratingbar_hearts_half.xml in drawable folder.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/heart_half" android:state_pressed="true" 
        android:state_window_focused="true"/>
    <item android:drawable="@drawable/heart_half" android:state_focused="true" 
        android:state_window_focused="true"/>
    <item android:drawable="@drawable/heart_half" android:state_selected="true" 
        android:state_window_focused="true"/>
    <item android:drawable="@drawable/heart_half"/>

</selector>

Create ratingbar_hearts_full.xml in drawable folder.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/heart_fill_pink" android:state_pressed="true" 
        android:state_window_focused="true"/>
    <item android:drawable="@drawable/heart_fill_pink" android:state_focused="true" 
        android:state_window_focused="true"/>
    <item android:drawable="@drawable/heart_fill_pink" android:state_selected="true" 
        android:state_window_focused="true"/>
    <item android:drawable="@drawable/heart_fill_pink"/>

</selector>

Images with hearts you can download here.

How to resize RatingBar

You should set scaleX, scaleY, transformPivotX, transformPivotY, layout_marginBottom, layout_marginRight attributes.

In layout

<RatingBar
    android:id="@+id/ratingBar"
    android:numStars="5"
    android:rating="4"
    android:isIndicator="true"
    android:scaleX=".5"
    android:scaleY=".5"
    android:transformPivotX="0dp"
    android:transformPivotY="0dp"
    android:layout_marginBottom="-26dp"
    android:layout_marginRight="-100dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:theme="@style/FoursquareReviewRating"/>

In styles.xml

<style name="FoursquareReviewRating" parent="Widget.AppCompat.RatingBar.Small">
    <item name="colorControlNormal">#ABBCCF</item>
    <item name="colorControlActivated">#F0C909</item>
</style>

Extensions for SeekBar

• SimpleRatingBar