Read More

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

and In onCreate method

Screenshot_2
Progress Level 5

Screenshot_1
On Progress

 

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 /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

Step 2: Make the RangedSeekbar

In XML file,

and in your attrs.xml file

or if you want to make it programmatically then

for float

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

Some snapshots while using RangeSeekbar in android

Screenshot_20160303-165000             Screenshot_20160303-165038

Screenshot_20160303-165057

Screenshot_20160303-165134

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.

Snap-Shot

Screenshot_2016-04-05-21-21-26

Get the Complete Source Code

For getting the complete project go to this link.

. . .

Comments (22)

Add Your Comment

  • rajesh
    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
      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.

      • rajesh
        Thanks Aman. Problem is resolved.
    • Aman Gupta
      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.
  • Parth Vora
    How to increase the line height in the range bar….?
  • Vinoth
    how to replace the thumb?
  • Kartik Setia
    How to add third thumb ? you have any solution for that ?
    • Aman Gupta
      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.
  • Aman Gupta
    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
    You can use the crystal-range-seekbar. This is the github link: https://github.com/syedowaisali/crystal-range-seekbar
  • Vishal
    can you tell how to change the color of of min and max text view and notify text..? please.
  • Kalin Maldjanski
    for more customizations as some asked for (colors, sizes, drawables,
    multiple thumbs) you can check out also
    https://github.com/apptik/MultiSlider
    • Aman Gupta
      Thanks @kalinmaldjanski:disqus for your advice. We really appreciate it.
  • Geeky
    How to set the step size or incrementBy () as in normal seekbar function
  • Caleb Ameh
    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
    hi. how to change the color of selected range text of above both thumbs ? it is in white color bydefault
  • Soumya Ranjan Jena
    how to use it in fargment
    i tired it but i got undefine error at

    setOnRangeSeekBarChangeListener
    setNotifyWhileDragging

  • Kiran Jnr
    how to change background color and thumb color of seekbar.
  • Shubham
    Best Solution for range seekbar. Thank you so much 🙂
    • Aman Gupta
      Your always welcome Bro. 🙂
  • css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again
    Close