Android RatingBar Tutorial With Example

Hello Readers! In this post, we are going to learn how to use android ratingBar widget. We will also go through different attributes of ratingBar widget that can be used to customise it.

Output

Tutorialwing Android Rating Bar Output Android RatingBar Widget tutorial with example

Tutorialwing Android Rating Bar Output

Getting Started

RatingBar widget can be defined as below –

A ratingBar is a widget that is extension of progressBar and seekBar that shows a rating in stars. The user can touch/drag or use arrow keys to set the rating.

Attributes of Android RatingBar Widget

Some of the popular attributes of android ratingBar widget are –

Sr. XML Attributes Description
1 android:isIndicator Specifies whether this rating bar is an indicator. Note – It can’t be changed by the user if it is an indicator.
2 android:numStars Specifies the number of stars(or rating items) to show.
3 android:rating Specifies the rating to show by default
4 android:stepSize Specifies the step size of the rating.

Some of the popular attributes of android ratingBar inherited from AbsSeekBar are –

Sr. XML Attributes Description
1 android:thumbTint Tint to apply to thumb drawable
2 android:thumbTintMode Blending mode used to apply the thumb tint
3 android:tickMarkTint Tint to apply to the tick mark drawable.
4 android:tickMarkTintMode Blending mode used to apply the tick mark tint.

Some of the popular attributes of android ratingBar inherited from ProgressBar are –

Sr. XML Attributes Description
1 android:maxHeight Sets maximum height of the view.
2 android:minHeight Sets minimum height of the view.
3 android:maxWidth Sets maximum width of the view.
4 android:minWidth Sets minimum width of the view.

Some of the popular attributes of android ratingBar inherited from View are –

Sr. XML Attributes Description
1 android:background Sets background of the view
2 android:id Sets id of the view. Note – Id must always be unique in an xml file
3 android:padding Sets padding(left, right, top, bottom) to the view.
4 android:visibility Sets visibility(show/hide) of the view.



Example of Android RatingBar Widget

At first, we will create android application. Then, we will use ratingBar widget in this application.

1. Creating New Project

Follow the steps below to create new application. Please ignore the steps if you have already created the application.

Step Description
1. Open Android Studio.
2. Go to File => New => New Project. Write application name as RatingBar. Then, click next button.
3. Select minimum SDK you need. However, we have selected 17 as minimum SDK. Then, click next button
4. Then, select Empty Activity => click next => click finish.
5. If you have followed above process correctly, you will get a newly created project successfully. However, you can also visit post to create a new project to know steps in detail.

Now, we will modify the xml and java file to use ratingBar in this application.

2. Modify Values folder

Open res/values/strings.xml file. Then, add below code into it.

<resources>
	<string name="app_name">RatingBar</string>
</resources>

Other values folders have not been changed. So, we are not going to mention it here.

3. Use ratingBar Widget in xml file

Open res/layout/activity_main.xml file. Then, add below code into it.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:gravity="center"
	android:orientation="vertical">

	<RatingBar
		android:id="@+id/ratingBar"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:stepSize="0.5"
		android:theme="@style/RatingBar"/>

	<Button
		android:id="@+id/button"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="Submit"/>

</LinearLayout>

In activity_main.xml file, we have used ratingBar widget and button widget. In RatingBar, android:stepSize=”0.5″ attribute is used to set incremental steps. Now, we will access these widgets in java file.

4. Access ratingBar Widget in java file

Open src/main/java/com.tutorialwing.ratingbar/MainActivity.java file. Then, add below code into it.

package com.tutorialwing.ratingbar;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.RatingBar;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

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

		final RatingBar ratingBar = findViewById(R.id.ratingBar);
		if (ratingBar != null) {
			Button button = findViewById(R.id.button);
			if (button != null) {
				button.setOnClickListener(new View.OnClickListener() {
					@Override
					public void onClick(View v) {
						String msg = String.valueOf(ratingBar.getRating());
						Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show();
					}
				});
			}
		}
	}
}

In MainActivity.java, we have accessed ratingBar widget. We have also set click listener to show toast message when button is clicked. Toast message displays the currently selected rating in ratingBar.

Since AndroidManifest.xml file is very important in any android application. We are also going to mention it here.

AndroidManifest.xml

Code inside src/main/AndroidManifest.xml file is as below –

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

	<application
		android:allowBackup="true"
		android:icon="@mipmap/ic_launcher"
		android:label="@string/app_name"
		android:roundIcon="@mipmap/ic_launcher_round"
		android:supportsRtl="true"
		android:theme="@style/AppTheme">
		<activity android:name=".MainActivity">
			<intent-filter>
				<action android:name="android.intent.action.MAIN"/>

				<category android:name="android.intent.category.LAUNCHER"/>
			</intent-filter>
		</activity>
	</application>

</manifest>

When you run the application, we will get output as shown above.

That’s end of tutorial on Android RatingBar Widget.

Leave a Reply