Android: RatingBar with Indicator Example
Contents
Project Description
- In the previous Android 4 rating bar example here, we created a simple rating bar and accepted user rating and displayed the rating as a Toast message.
- In this Android RatingBar tutorial, we will create a rating bar with indicator using android.widget.RatingBar defined in XML layout file and implement OnRatingBarChangeListener to accept user rating, calculate the total ratings and display it in indicator rating bar.
Environment Used
- JDK 6 (Java SE 6)
- Eclipse Indigo IDE for Java EE Developers (3.7.1)
- Android SDK 4.0.3 / 4.1 Jelly Bean
- Android Development Tools (ADT) Plugin for Eclipse (ADT version 20.0.0)
- Refer this link to setup the Android development environment
Prerequisites
Android Project
Create an Android project and name it as “InteractiveRatingBar“.
strings.xml
Open res/values/string.xml and replace it with following content.
<?xml version="1.0" encoding="utf-8"?> <resources> <string name="hello">Hello World, InteractiveRatingBarActivity!</string> <string name="app_name">InteractiveRatingBar</string> </resources>
XML layout files
This application uses XML layout file (main.xml) to display the rating bar.
Open main.xml file in res/layout and copy the following content.
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <RatingBar android:id="@+id/getRating" android:layout_width="wrap_content" android:layout_height="wrap_content" android:numStars="5" android:stepSize="1.0" /> <RatingBar android:id="@+id/setRating" style="?android:attr/ratingBarStyleSmall" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/getRating" android:isIndicator="true" android:numStars="5" android:stepSize="0.1" /> <TextView android:id="@+id/countText" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@+id/getRating" android:layout_toRightOf="@+id/setRating" android:paddingLeft="10dp" /> </RelativeLayout>
This layout file creates two Android RatingBar – one for accepting user rating and other for displaying the overall ratings.
android:numStars | The number of stars (or rating items) to show |
android:stepSize | The step size of the rating |
android:isIndicator | Whether this rating bar is an indicator (and non-changeable by the user) |
style=”?android:attr/ratingBarStyleSmall” | Creates small indicator RatingBar style |
Activity
In src folder, create a new Class and name it as “InteractiveRatingBarActivity” in the package “com.theopentutorials.android.views” and copy the following code.
package the.opentutorials.android.views; import java.text.DecimalFormat; import android.app.Activity; import android.os.Bundle; import android.widget.RatingBar; import android.widget.RatingBar.OnRatingBarChangeListener; import android.widget.TextView; import android.widget.Toast; public class InteractiveRatingBarActivity extends Activity implements OnRatingBarChangeListener { RatingBar getRatingBar; RatingBar setRatingBar; TextView countText; int count; float curRate; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); findViewsById(); setRatingBar.setRating(curRate); getRatingBar.setOnRatingBarChangeListener(this); } private void findViewsById() { getRatingBar = (RatingBar) findViewById(R.id.getRating); setRatingBar = (RatingBar) findViewById(R.id.setRating); countText = (TextView) findViewById(R.id.countText); } public void onRatingChanged(RatingBar rateBar, float rating, boolean fromUser) { DecimalFormat decimalFormat = new DecimalFormat("#.#"); curRate = Float.valueOf(decimalFormat.format((curRate * count + rating) / ++count)); Toast.makeText(InteractiveRatingBarActivity.this, "New Rating: " + curRate, Toast.LENGTH_SHORT).show(); setRatingBar.setRating(curRate); countText.setText(count + " Ratings"); } }
Here, in onRatingChanged() method, we get the user’s rating, calculate the overall rating and total no. of ratings and set it in the rating bar marked as indicator.
AndroidManifest.xml
Define the activity in AndroidManifest.xml file
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="the.opentutorials.android.views" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="15" /> <application android:icon="@drawable/ic_launcher" android:label="@string/app_name" > <activity android:name=".InteractiveRatingBarActivity" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>
Output
Project Folder Structure
The complete folder structure of this example is shown below.
Tags: Android 4 Examples, Android 4 icecream sandwich examples, Android 4.1 Jelly Bean Examples, Android create smaller rating bar, Android Examples, Android rating bar tutorial, android rating bar user interaction, Android RatingBar Example, Android RatingBar indicator, Android RatingBar indicator example