Android SeekBar with Examples

In android, SeekBar is an extension of ProgressBar control with a draggable thumb. The SeekBar allows users to touch the thumb and drag left or right to set the current progress levels.

 

The android SeekBar is one of the useful UI element and it provides a user interface to select the integer values within the defined range.

 

Following is the pictorial representation of using a SeekBar in android applications.

 

Android SeekBar Control Example Diagram

 

By using the draggable thumb in SeekBar we can slide left or right to choose a value between 0 and maximum integer value which we defined using android:max attribute. An example of SeekBar is our device Brightness control or volume control.

 

In android, by using SeekBar.OnSeekBarChangeListener listener, we can notify the client when the progress level of seekbar has been changed.

Create Android SeekBar in XML Layout File

In android, we can create SeekBar in XML layout file using <SeekBar> element with different attributes like as shown below.

 

<SeekBar android:id="@+id/seekBar1"
   
android:layout_width=" wrap_content"
   
android:layout_height="wrap_content"
   
android:max="100"
   
android:indeterminate="false"
   
android:progress="50" />

If you observe above code snippet, we defined a seekbar (<SeekBar>) with different attributes, those are

 

AttributeDescription
android:id It is used to uniquely identify the control
android:indeterminate It is used to show the cyclic animation in seekbar without an indication of progress.
android:max It is used to set the maximum value of seekbar.
android:progress It is used to set the default progress value between 0 and max. It must be an integer value.

In android, the SeekBar supports two types of modes to show the progress, those are Determinate and Indeterminate.

Android SeekBar with Determinate Mode

Generally, we use the Determinate progress mode in seekbar when we want to show the quantity of progress has occurred. For example, the percentage of a file downloaded, number of records inserted into a database, etc.

 

Following is the example which shows a Determinate seekbar that is 50% complete.

 

<SeekBar
   
android:id="@+id/seekBar1"
   
android:layout_width="300dp"
   
android:layout_height="wrap_content"
   
android:max="100"
   
android:progress="50" />

The above code snippet will show the SeekBar like as shown below

 

Android SeekBar in Determinate Mode Example Diagram

 

Generally, when the progress value reaches 100 then the progress bar is full. By using android:max attribute we can adjust this value. 

Android SeekBar with Indeterminate Mode

Generally, we use the Indeterminate progress mode in seekbar when we don’t know how long an operation will take or how much work has done.

 

In indeterminate mode the actual progress will not be shown, only the cyclic animation will be shown to indicate that some progress is happing.

 

Following is the example to set Indeterminate progress mode in an XML layout file.

 

<SeekBar android:id="@+id/seekBar1"
   
android:layout_width="300dp"
   
android:layout_height="wrap_content"
   
android:max="100"
   
android:indeterminate="true"
   
android:progress="0" />

The above code snippet will show the SeekBar like as shown below.

 

Android Indeterminate Seek Bar Example Diagram

This is how we can define the Progress modes in SeekBar based on our requirements in android applications.

Android SeekBar Control Attributes

The following are some of the commonly used attributes related to SeekBar control in android applications.

 

AttributeDescription
android:id It is used to uniquely identify the control
android:max It is used to specify the maximum value of the progress can take
android:progress It is used to specify default progress value.
android:background It is used to set the background color for a progress bar.
android:indeterminate It is used to enable the indeterminate progress mode.
android:padding It is used to set the padding for left, right, top or bottom of a progress bar.
android:progressDrawable It is used to set the custom drawable XML for the progress mode of a seekbar.
android:thumb It is used to set the thumb icon on seekbar to drag left or right.

Android SeekBar Control Example

Following is the example of defining a SeekBar control and TextView control in RelativeLayout to get the progress changes in seekbar using SeekBar changed listener event.

 

Create a new android application using android studio and give names as SeekBarExample. In case if you are not aware of creating an app in android studio check this article Android Hello World App.

 

Now open an activity_main.xml file from \res\layout path and write the code like as shown below

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
android:layout_width="match_parent" android:layout_height="match_parent">
    <
SeekBar
       
android:id="@+id/seekBar1"
       
android:layout_width="300dp"
       
android:layout_height="wrap_content"
       
android:layout_marginLeft="40dp"
       
android:layout_marginTop="200dp"
        
android:max="100"
       
android:indeterminate="false"
       
android:progress="0" />
    <
TextView
       
android:id="@+id/textview1"
       
android:layout_width="wrap_content"
       
android:layout_height="wrap_content"
       
android:layout_alignLeft="@+id/seekBar1"
       
android:layout_below="@+id/seekBar1"
       
android:layout_marginTop="40dp"
       
android:layout_marginLeft="130dp"
       
android:textSize="20dp"
       
android:textStyle="bold"/>
</
RelativeLayout>

If you observe above code we created a one SeekBar control and one TextView control in XML Layout file.

 

Once we are done with the creation of layout with required controls, we need to load the XML layout resource from our activity onCreate() callback method, for that open main activity file MainActivity.java from \java\com.tutlane.seekbarexample path and write the code like as shown below.

MainActivity.java

package com.tutlane.seekbarexample;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.SeekBar;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
   
private SeekBar sBar;
   
private TextView tView;
   
@Override
   
protected void onCreate(Bundle savedInstanceState) {
       
super.onCreate(savedInstanceState);
        setContentView(R.layout.
activity_main);
       
sBar = (SeekBar) findViewById(R.id.seekBar1);
       
tView = (TextView) findViewById(R.id.textview1);
       
tView.setText(sBar.getProgress() + "/" + sBar.getMax());
       
sBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
           
int pval = 0;
           
@Override
           
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
               
pval = progress;
            }
           
@Override
           
public void onStartTrackingTouch(SeekBar seekBar) {
           
//write custom code to on start progress
           
}
           
@Override
           
public void onStopTrackingTouch(SeekBar seekBar) {
               
tView.setText(pval + "/" + seekBar.getMax());
            }
        });
    }
}

If you observe above code we are calling our layout using setContentView method in the form of R.layout.layout_file_name in our activity file. Here our xml file name is activity_main.xml so we used file name activity_main and we are trying to show the progress of task in seek bar on progress change event.

 

Generally, during the launch of our activity, the onCreate() callback method will be called by the android framework to get the required layout for an activity.

Output of Android SeekBar Example

When we run the above example using an android virtual device (AVD) we will get a result like as shown below.

 

Android SeekBar Example Result to Show the Progress of Task

 

If you observe the above result, we are able to start showing the progress of the task in the seekbar when we click on it in the android application.

 

This is how we can use SeekBar control in android applications to show the progress of tasks or work based on our requirements.