Android Custom Material Design RatingBar Example Tutorial

Create custom rating bar in android application with latest material style effect.

In this tutorial we are going to modify the rating bar theme with the use of custom custom theme and make our rating bar to just look like as Material Design RatingBar. It is basically used to get the rating of your product so app user can gives us the feedback. So here is the complete step by step tutorial for Android Custom Material Design RatingBar Example Tutorial .

android-project-download-code-button

How to create Android Custom Material Design RatingBar .

Code for MainActivity.java file.

package com.android_examples.customratingbar_android_examplescom;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.RatingBar;
import android.widget.Toast;

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.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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.android_examples.customratingbar_android_examplescom.MainActivity"
    android:background="#E0F2F1">

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

    <TextView
        android:text="Custom RatingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/ratingBar"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="46dp"
        android:id="@+id/textView2"
        android:textSize="30dp"/>

</RelativeLayout>

Code for styles.xml layout file.

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <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>

Screenshot:

Android Custom Material Design RatingBar Example Tutorial

Click here to download project with source code.

Leave a Reply

Your email address will not be published. Required fields are marked *