Android SeekBar example

By: Unknown 0 comments

SeekBar:

            Android SeekBar is the extension of ProgressBar. SeekBar allows the user to change the value using touch event/draggable thumb/left right arrow keys. The user can increase the value by dragging the thumb right   or by pressing the right arrow key. Similarly the user can decrease the value by dragging the thumb left or by pressing the left arrow key.

How to create:
SeekBar can be created using <SeekBar> tag in the layout xml file. For example;

<SeekBar
        android:id="@+id/seekBar1"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="26dp"/>

Important properties of SeekBar:
By default the SeekBar takes maximum value of 100. This max value can be changed using android:max="10"attribute in the layout xml file.
android:progress="5"  attribute is used to set the initial progress value. So if we set the progress attribute to 5, then during initial loading the SeekBar thumb will start at 5.

How to add listener to notify the changes:
SeekBar.OnSeekBarChangeListener is used as a callback that notifies clients when the progress level has been changed. This can be used for both user initiated changes as well as for programmatic chagnes.

seekBarInstance.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {...} method is used to notify the user actions/changes in the SeekBar.

We need to implement three abstract methods here;
1. public void onProgressChanged(SeekBar seekBar, int progresValue, boolean fromUser) {...}
    This listener method will be invoked if any change is made in the SeekBar
2. public void onStartTrackingTouch(SeekBar seekBar) {...}
    This listener method will be invoked at the start of user's touch event.
3. public void onStopTrackingTouch(SeekBar seekBar) {...}
    This listener method will be invoked at the end of user touch event.

Example application:
In this example application, I am just creating the SeekBar and displaying its current value in the TextView.

Android layout xml file: activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <SeekBar
        android:id="@+id/seekBar1"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="26dp"
        android:max="10"/>

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/seekBar1"
        android:layout_marginLeft="29dp"
        android:layout_marginTop="14dp" />

</RelativeLayout>

Activity class: MainActivity.java

package com.example.seekbar;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;
import android.widget.TextView;

/**
 * Android SeekBar example
 * @author Prabu Dhanapal
 * @version 1.0
 * @since SEP 02 2013
 * 
 */
public class MainActivity extends Activity {
 
 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.seekBar1);
  textView = (TextView) findViewById(R.id.textView1);
  // Initialize the textview with '0'
  textView.setText(seekBar.getProgress() + "/" + seekBar.getMax());
  seekBar.setOnSeekBarChangeListener(

                new OnSeekBarChangeListener() {
    int progress = 0;
        @Override
      public void onProgressChanged(SeekBar seekBar, 

                                            int progresValue, boolean fromUser) {
        progress = progresValue;
      }

      @Override
      public void onStartTrackingTouch(SeekBar seekBar) {
        // Do something here, 

                      //if you want to do anything at the start of
        // touching the seekbar
      }

      @Override
      public void onStopTrackingTouch(SeekBar seekBar) {
        // Display the value in textview
        textView.setText(progress + "/" + seekBar.getMax());
      }
  });
 }

 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
  // Inflate the menu; 

                //this adds items to the action bar if it is present.
  getMenuInflater().inflate(R.menu.activity_main, menu);
  return true;
 }

}

Output screenshots: 

Source code of this application:
SeekBar.zip