Wednesday 17 August 2011

Rating Bar in Android

In Android, you can use “android.widget.RatingBar” to display rating bar component in stars icon. The user is able to touch, click on the stars or drag to set the rating value easily.
Here we I will show you how to use XML to display a rating bar, few textviews When user click/drag on the rating bar’s star, the selected rating value will be displayed in the textview.

Here rating bar contains many configurable values. In this case, the rating bar contains 5 stars, each increase 1.0 value, so, it contains the minimum of 1.0 (1 star) and maximum value of 5.0 (5 stars). In addition, it made the 1nd star (1.0) selected by default. 

layout(ratingBar.xml)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<TextView
android:id="@+id/RateMe"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Please Rate Me"
android:textAppearance="?android:attr/textAppearanceMedium" />

<RatingBar
android:id="@+id/ratingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="5"
android:rating="1.0"
android:stepSize="0.5" />

<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >

<TextView
android:id="@+id/textesult"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Result is : "
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/txtRatingValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>

</LinearLayout>

Activity (ShowRatingbarActivity.class):

Inside activity “onCreate()” method, attach a listener on rating bar, fire when rating value is changed.

package com.androidsurya.ratingbarwidget;

import android.app.Activity;
import android.os.Bundle;
import android.widget.RatingBar;
import android.widget.RatingBar.OnRatingBarChangeListener;
import android.widget.TextView;

public class ShowRatingbarActivity extends Activity {

    private RatingBar ratingBar;
    private TextView txtRatingValue;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.ratingbar);
        addListenerOnRatingBar();

    }

    public void addListenerOnRatingBar() {

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

        // if rating value is changed and display the current rating value in the result (textview)
        // automatically
        ratingBar.setOnRatingBarChangeListener(new OnRatingBarChangeListener() {
            public void onRatingChanged(RatingBar ratingBar, float rating,
                    boolean fromUser) {

                txtRatingValue.setText(String.valueOf(rating));

            }
        });
    }

}

Manifest file(AndroidManifest)

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.androidsurya.ratingbarwidget"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="15" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".ShowRatingbarActivity"
            android:label="@string/title_activity_ratingbar" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

</manifest>
 Output Screenshot:

 




No comments:

Post a Comment

Android SQLite Database Viewer or Debuging with Stetho

Every Android Developer uses SQLite Database to store data into the Android Application data. But to view the data in SQLite have a lot of...