SeekBar Tutorial and Examples

When it comes to user interfaces in Android, the SeekBar is a versatile component that allows users to select a value from a range of values by sliding their finger along a track. It’s commonly used for settings, volume controls, and seeking media playback.

In this article, we’ll explore the SeekBar component in Android, its properties, and how to use it in your app. We’ll also provide some code examples to help you get started.

What is a SeekBar?

A SeekBar is a UI element that displays a horizontal or vertical track with a thumb (slider) that can be dragged by the user to select a value. The SeekBar has a minimum and maximum value, which can be set using its properties.

The user can interact with the SeekBar by dragging the thumb to select a value, or by tapping on the track to move the thumb to a specific position.

How to Use a SeekBar

To use a SeekBar in your app, you’ll need to add the SeekBar component to your XML layout file. Here’s an example of how to add a horizontal SeekBar to your layout:

<SeekBar
    android:id="@+id/seekbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:max="100"
    android:progress="50" />

In this example, we’ve set the android:max property to 100, which sets the maximum value of the SeekBar to 100. We’ve also set the android:progress property to 50, which sets the initial value of the SeekBar to 50.

Once you’ve added the SeekBar to your layout file, you can reference it in your Java code using its ID. Here’s an example of how to get a reference to the SeekBar:

SeekBar seekBar = findViewById(R.id.seekbar);

You can then set an OnSeekBarChangeListener on the SeekBar to listen for changes in the value. Here’s an example of how to set an OnSeekBarChangeListener:

seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
        // Do something when the SeekBar value changes
    }

    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {
        // Do something when the user starts dragging the SeekBar
    }

    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {
        // Do something when the user stops dragging the SeekBar
    }
});

In this example, we’ve implemented the onProgressChanged, onStartTrackingTouch, and onStopTrackingTouch methods of the OnSeekBarChangeListener interface. The onProgressChanged method is called when the value of the SeekBar changes, the onStartTrackingTouch method is called when the user starts dragging the SeekBar, and the onStopTrackingTouch method is called when the user stops dragging the SeekBar.

SeekBar API Definition

SeekBar resides in the android.widget package and derives from the android.widget.AbsSeekBar class.

public class SeekBar extends AbsSeekBar

Here's the inheritance chain of seekbar:

java.lang.Object
   ↳    android.view.View
       ↳    android.widget.ProgressBar
           ↳    android.widget.AbsSeekBar
               ↳    android.widget.SeekBar

Important Methods

(a). onProgressChanged

public abstract void onProgressChanged (SeekBar seekBar,
                int progress,
                boolean fromUser)

Notification that the progress level has changed. Clients can use the fromUser parameter to distinguish user-initiated changes from those that occurred programmatically.

The parameters are:

1. SeekBar - The SeekBar whose progress has changed
2. progress int: The current progress level. This will be in the range min..max where min and max were set by ProgressBar.setMin(int) and ProgressBar.setMax(int), respectively. (The default values for min is 0 and max is 100.)
3. fromUser boolean: True if the progress change was initiated by the user.

(b). onStartTrackingTouch

public abstract void onStartTrackingTouch (SeekBar seekBar)

Notification that the user has started a touch gesture. Clients may want to use this to disable advancing the seekbar.

The Parameters are:

1. seekBar SeekBar: The SeekBar in which the touch gesture began

(c). onStopTrackingTouch

public abstract void onStopTrackingTouch (SeekBar seekBar)

Notification that the user has finished a touch gesture. Clients may want to use this to re-enable advancing the seekbar.

The Parameters are:

1. seekBar SeekBar: The SeekBar in which the touch gesture began

[notice] The above methods are not defined directly in seekbar class but inside the OnSeekBarChangeListener interface. However that interface resides in the seekbar class. [/notice]

SeekBar Examples

1. SeekBar Example - Show Progress in a TextView

Here's the code for first example:

(a). MainActivity.java

Here's our main activity.

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.SeekBar;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements SeekBar.OnSeekBarChangeListener{

    private SeekBar seekBar ;
    private TextView tv1 ;
    private TextView tv2 ;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        seekBar = (SeekBar) findViewById(R.id.seekbar);
        tv1 = (TextView) findViewById(R.id.tv1);
        tv2= (TextView) findViewById(R.id.tv2);

        seekBar.setOnSeekBarChangeListener(this);
    }

    /**
     * Value change
     * @param seekBar
     * @param progress
     * @param fromUser
     */
    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
        tv1.setText("dragging" );
        tv2.setText("current value: " + progress );
    }

    /**
     * Start dragging
     * @param seekBar
     */
    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {
        tv1.setText("start dragging");
    }

    // Stop the move
    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {
        tv1.setText("stop dragging");
    }
}

(b). main.xml

Here's the main layout for activity. Here we will have a Seekbar as well as several TextViews. We organize them vertically with a LinearLayout.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android_layout_width="match_parent"
    android_layout_height="match_parent"
    android_orientation="vertical">

    <SeekBar
        android_thumb="@drawable/my_thumb"
        android_id="@+id/seekbar"
        android_layout_width="match_parent"
        android_layout_height="wrap_content"
        android_max="100"
        android_progress="50"/>
    <TextView
        android_layout_width="match_parent"
        android_layout_height="wrap_content"
        android_id="@+id/tv1"/>
    <TextView
        android_layout_width="match_parent"
        android_layout_height="wrap_content"
        android_id="@+id/tv2"/>
</LinearLayout>

Conclusion

The SeekBar is a powerful and versatile component in Android that allows users to select values from a range of values. By setting its properties and implementing its listener interface, you can easily add a SeekBar to your app and customize its behavior.

We hope this article has helped you understand the SeekBar in Android and how to use it in your app. Happy coding!