Android SeekBar and RatingBar Example Tutorial [Latest]

Android SeekBar

A SeekBar is an extension of ProgressBar that adds a draggable thumb. The user can touch the thumb and drag left or right thereby allowing user to change the values of the components it’s attached to. Its usages includes device brightness control and volume control.

Similar to the ProgressBar, it uses two properties that are android:max and android:progress.

The SeekBar.OnSeekBarChangeListener interface provides methods to perform event handling callbacks for SeekBar. The methods include:

• onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) : It’s used to notify any change in the level of SeekBar.
• onStartTrackingTouch(SeekBar seekBar) : It’s used to notify that the user has started a touch gesture.
• onStopTrackingTouch(SeekBar seekBar) : It’s used to notify that the user has finished a touch gesture

Android RatingBar

Android RatingBar is used to get the rating from the user. The Rating is returned as a floating-point number.

Following are the important attributes of a RatingBar.

• android:numStars : The number of stars to show in the RatingBar
• android:stepSize : The step size of the rating. A size of 0.5 implies half ratings can be set (such as 3.5)
• android:isIndicator : Whether this rating bar is an indicator that indicates the total number of ratings and is non-changeable by the user
• style=”?android:attr/ratingBarStyleSmall” : Creates small indicator RatingBar style

The getRating() method of RatingBar returns the rating number.
OnRatingBarChangeListener interface is implemented and the following method needs to be overridden:

onRatingChanged(RatingBar ratingBar, float rating,
            boolean fromUser)

In this tutorial we’ll display a SeekBar along with a TextView to show the corresponding value from the SeekBar at any given time and a RatingBar with the rating displayed in a toast.

Project Structure

Code

The activity_main.xml layout contains a SeekBar, RatingBar and a TextView as shown in the xml code below:

<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >
    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:max="10"/>
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/seekBar"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginTop="@dimen/activity_vertical_margin" />
    <RatingBar android:id="@+id/ratingbar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="5"
        android:stepSize="0.5"
        android:layout_centerVertical="true"
        android:layout_alignRight="@+id/seekBar"
        android:layout_alignEnd="@+id/seekBar" />
</RelativeLayout>

The MainActivity.java is given below:

package com.journaldev.seekbar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.RatingBar;
import android.widget.SeekBar;
import android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity implements RatingBar.OnRatingBarChangeListener {
    private SeekBar seekBar;
    private TextView textView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        seekBar = (SeekBar) findViewById(R.id.seekBar);
        textView = (TextView) findViewById(R.id.textView);
        final RatingBar ratingbar = (RatingBar) findViewById(R.id.ratingbar);
        ratingbar.setOnRatingBarChangeListener(this);
        // Initialize the textview with '0'
        textView.setText(seekBar.getProgress() + "/" + seekBar.getMax());
        seekBar.setOnSeekBarChangeListener(
                new SeekBar.OnSeekBarChangeListener() {
                    int progress = 0;
                    @Override
                    public void onProgressChanged(SeekBar seekBar,
                                                  int progressValue, boolean fromUser) {
                        progress = progressValue;
                    }
                    @Override
                    public void onStartTrackingTouch(SeekBar seekBar) {
                    }
                    @Override
                    public void onStopTrackingTouch(SeekBar seekBar) {
                        // Display the value in textview
                        textView.setText(progress + "/" + seekBar.getMax());
                    }
                });
    }
    public void onRatingChanged(RatingBar ratingBar, float rating,
                                boolean fromUser) {
        Toast.makeText(MainActivity.this, "New Rating: " + rating,
                Toast.LENGTH_SHORT).show();
    }
}

The method onStartTrackingTouch() is used to perform any task when the user starts dragging the SeekBar. In our case it’s empty. A Toast represents the new rating value obtained from the RatingBar.

Below is our application running in android emulator.

This brings an end to this tutorial. You can download the final Android SeekBar and RatingBar Project from the link given below.