How to make Range seekbar or dual thumbs seekbar in android

In this blog,
I have shown how to make dual thumbs Seekbar or we can say a Range SeekBar in android. But first of all, I will give the small introduction about the simple Seekbar in android.

Meet with SeekBar

SeekBar is useful user interface element which is used commonly in android applications. A SeekBar is an extension of ProgressBar that allows the selection of numerical values using a natural user thumbs. Basically, SeekBar has a thumb that you can slide to choose a value between 0 and some maximum that you set.

You can touch the thumb and drag left or right to set the current progress or use the arrow keys.

A common usage of Seekbar is our device brightness control and volume control.

How to implement

In this example, I have created a simple Seekbar

  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_gravity="center"
        android:layout_height="wrap_content">

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

    </RelativeLayout>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_gravity="center"

android:layout_height="wrap_content">

<SeekBar

android:id="@+id/seekBar"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_alignParentLeft="true"

android:layout_alignParentTop="true"

android:layout_marginTop="26dp"

android:max="10" />

</RelativeLayout>

and In onCreate method

 SeekBar seekBar = (SeekBar) findViewById(R.id.seekBar);
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                Toast.makeText(getApplicationContext(), progress + "", Toast.LENGTH_LONG).show();
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });

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

seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {

@Override

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

Toast.makeText(getApplicationContext(), progress + "", Toast.LENGTH_LONG).show();

}

@Override

public void onStartTrackingTouch(SeekBar seekBar) {

}

@Override

public void onStopTrackingTouch(SeekBar seekBar) {

}

});

Now we have been known that how to make simple Seekbar.

But if we want to make dual thumbs means a Range Seekbar then what android doesn’t give the range Seekbar and if we want to customize Seekbar then we have to write huge lines of code.

Seekbar with dual Thumbs

So, I have shown you how to make the RangedSeekbar by using yahoo/android-range-seek-bar.

Actually, RangedSeekbar is a simple SeekBar similar to the default Android one, but with two thumb controls allowing a range to be selected.

Step 1: Add the dependency in app level build.gradle file

dependencies {
          compile 'com.yahoo.mobile.client.android.util.rangeseekbar:rangeseekbar-library:0.1.0'
}

dependencies {

compile 'com.yahoo.mobile.client.android.util.rangeseekbar:rangeseekbar-library:0.1.0'

}

Step 2: Make the RangedSeekbar

In XML file,

<com.yahoo.mobile.client.android.util.rangeseekbar.RangeSeekBar
            android:id="@+id/rangeSeekbar"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            rsb:absoluteMaxValue="100"
            rsb:absoluteMinValue="0" />

<com.yahoo.mobile.client.android.util.rangeseekbar.RangeSeekBar

android:id="@+id/rangeSeekbar"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

rsb:absoluteMaxValue="100"

rsb:absoluteMinValue="0" />

and in your attrs.xml file

<resources>
    <declare-styleable name="RangeSeekBar">
        <attr name="absoluteMinValue" format="integer|float"/>
        <attr name="absoluteMaxValue" format="integer|float"/>
        <attr name="singleThumb" format="boolean"/>
    </declare-styleable>

</resources>

<declare-styleable name="RangeSeekBar">

</declare-styleable>

</resources>

or if you want to make it programmatically then

RangeSeekBar<Integer> seekBar = new RangeSeekBar<Integer>(getActivity());
seekBar.setRangeValues(0, 100);

1 2	RangeSeekBar<Integer> seekBar = new RangeSeekBar<Integer>(getActivity()); seekBar.setRangeValues(0, 100);

for float

RangeSeekBar<Float> seekBar = new RangeSeekBar<Float>(getActivity());
seekBar.setRangeValues(0.00, 99.99);

1 2	RangeSeekBar<Float> seekBar = new RangeSeekBar<Float>(getActivity()); seekBar.setRangeValues(0.00, 99.99);

Step 3: Add the listener and get the min and max value

seekBar.setOnRangeSeekBarChangeListener(new RangeSeekBar.OnRangeSeekBarChangeListener<Integer>() {
        @Override
        public void onRangeSeekBarValuesChanged(RangeSeekBar<?> bar, Integer minValue, Integer maxValue) {
        //Now you have the minValue and maxValue of your RangeSeekbar
        Toast.makeText(getApplicationContext(), minValue + "-" + maxValue, Toast.LENGTH_LONG).show();
     }
});

// Get noticed while dragging
seekBar.setNotifyWhileDragging(true);

seekBar.setOnRangeSeekBarChangeListener(new RangeSeekBar.OnRangeSeekBarChangeListener<Integer>() {

@Override

public void onRangeSeekBarValuesChanged(RangeSeekBar<?> bar, Integer minValue, Integer maxValue) {

//Now you have the minValue and maxValue of your RangeSeekbar

Toast.makeText(getApplicationContext(), minValue + "-" + maxValue, Toast.LENGTH_LONG).show();

}

});

// Get noticed while dragging

seekBar.setNotifyWhileDragging(true);

Some snapshots while using RangeSeekbar in android

How to disable thumbs while dragging in RangedSeekBar

In below block of code, I have shown how to disable thumbs while dragging if the difference b/w minValue and maxValue is 40 or below 40.

 int preMin = -1;
 int preMax = -1;

final RangeSeekBar<Integer> seekBar = new RangeSeekBar<Integer>(this);
        seekBar.setRangeValues(0, 100);
//setNotifyWhileDragging is important method to achive this functionality
        seekBar.setNotifyWhileDragging(true);

        seekBar.setOnRangeSeekBarChangeListener(new RangeSeekBar.OnRangeSeekBarChangeListener<Integer>() {
            @Override
            public void onRangeSeekBarValuesChanged(RangeSeekBar<?> bar, Integer minValue, Integer maxValue) {
                int diff = maxValue - minValue;
                if (diff == 39 || diff < 40) {
                    bar.setEnabled(false);
                    if(minValue != preMin){
                        seekBar.setSelectedMinValue(preMin);
                    }
                    else if(maxValue != preMax){
                        seekBar.setSelectedMaxValue(preMax);
                    }
                    AlertDialog.Builder alert = new AlertDialog.Builder(MainActivity.this);
                    alert.setNegativeButton(getResources().getString(android.R.string.ok), new DialogInterface.OnClickListener() {
                        @Override
                        public void onClick(DialogInterface dialog, int which) {
                            dialog.dismiss();
                            seekBar.setEnabled(true);
                        }
                    });
                    alert.setCancelable(false);
                    alert.setMessage(Html.fromHtml("You cant move below 40!!")).show();

                } else {
                    preMin = minValue;
                    preMax = maxValue;
                }
            }
        });

int preMin = -1;

int preMax = -1;

final RangeSeekBar<Integer> seekBar = new RangeSeekBar<Integer>(this);

seekBar.setRangeValues(0, 100);

//setNotifyWhileDragging is important method to achive this functionality

seekBar.setNotifyWhileDragging(true);

seekBar.setOnRangeSeekBarChangeListener(new RangeSeekBar.OnRangeSeekBarChangeListener<Integer>() {

@Override

public void onRangeSeekBarValuesChanged(RangeSeekBar<?> bar, Integer minValue, Integer maxValue) {

int diff = maxValue - minValue;

if (diff == 39 || diff < 40) {

bar.setEnabled(false);

if(minValue != preMin){

seekBar.setSelectedMinValue(preMin);

}

else if(maxValue != preMax){

seekBar.setSelectedMaxValue(preMax);

}

AlertDialog.Builder alert = new AlertDialog.Builder(MainActivity.this);

alert.setNegativeButton(getResources().getString(android.R.string.ok), new DialogInterface.OnClickListener() {

@Override

public void onClick(DialogInterface dialog, int which) {

dialog.dismiss();

seekBar.setEnabled(true);

}

});

alert.setCancelable(false);

alert.setMessage(Html.fromHtml("You cant move below 40!!")).show();

} else {

preMin = minValue;

preMax = maxValue;

}

});

Snap-Shot

Get the Complete Source Code

For getting the complete project go to this link.

Aman Gupta 1 June 2018

. . .

23 comments

rajesh Mar 22, 2016 at 9:52 am

I am using range seek bar in my app it works fine but how to set the range between the thumbs?this is my S.O question please see this http://stackoverflow.com/questions/36131967/how-to-set-range-between-two-thumbs-in-range-seek-bar-in-android

Aman Gupta Mar 30, 2016 at 3:50 pm
tell the range value b/w your thumbs in your RangeSeekBar. Which is set in this method.
seekBar.setRangeValues(0, 100);

or please share your java class file, where you have used the RangeSeekBar.

Reply
- rajesh Apr 14, 2016 at 5:47 am
  Thanks Aman. Problem is resolved.
  
  Reply
Aman Gupta Apr 7, 2016 at 3:42 pm
Thanks for sharing your code. And I have edit our blog and please read this section “How to disable thumbs while dragging in RangedSeekBar” for your problem.

Reply

Parth Vora May 25, 2016 at 10:39 am

How to increase the line height in the range bar….?

Vinoth Jul 15, 2016 at 11:35 am

how to replace the thumb?

Kartik Setia Nov 2, 2016 at 8:55 am

How to add third thumb ? you have any solution for that ?

Aman Gupta Nov 3, 2016 at 11:05 am
What is need of third thumb in ranged seekbar?
We have not any solution yet. But we will reply you soon if we will get any solution for that.
Thanks.

Reply

Aman Gupta Nov 3, 2016 at 10:55 am

This library doesn’t provide this functionality. You can use the material-range-bar for implementing this.

This is link: https://github.com/oli107/material-range-bar

Aman Gupta Nov 3, 2016 at 11:00 am

You can use the crystal-range-seekbar. This is the github link: https://github.com/syedowaisali/crystal-range-seekbar

Vishal Nov 16, 2016 at 11:33 am

can you tell how to change the color of of min and max text view and notify text..? please.

Aman Gupta Nov 16, 2016 at 11:49 am
You can use either crystal-range-seekbar or material-range-bar both give the your required functionality.
Links are,
https://github.com/syedowaisali/crystal-range-seekbar
https://github.com/oli107/material-range-bar

Reply

Kalin Maldjanski Dec 20, 2016 at 4:26 pm

for more customizations as some asked for (colors, sizes, drawables,
multiple thumbs) you can check out also
https://github.com/apptik/MultiSlider

Aman Gupta Dec 23, 2016 at 1:29 pm
Thanks @kalinmaldjanski:disqus for your advice. We really appreciate it.

Reply

Geeky Mar 28, 2017 at 5:55 am

How to set the step size or incrementBy () as in normal seekbar function

Caleb Ameh Apr 29, 2017 at 7:21 pm

Hi..Please I’m trying to create a range seekbar for a project that can select just 5 seconds within any point in the full range of a video. Haven’t had luck with modifying the code given above

Abhi Harsole Sep 12, 2017 at 6:26 am

hi. how to change the color of selected range text of above both thumbs ? it is in white color bydefault

aastha gupta Jul 23, 2018 at 12:16 pm
@abhiharsole:disqus It can’t be modified. I will suggest you to use https://github.com/oli107/material-range-bar instead.

Reply