Android Seekbar with two thumbs

Question

Variations of this question can be found all over the internet but not an answer.

I want a seekbar with two-thumb range selection. I'm willing to program this myself but I lack experience with Android. Could someone give me some pointers on where to start. I mean, I know I will have to extend something (ProgressBar probably), but how should I go about to do that? Do I really have to recreate all the functionality of a standard seekbar, or is there an easier way?

Complete solutions are also welcome of course ;)

Why not try extending SeekBar itself or perhaps AbsSeekBar? THis is the source for SeekBar...http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android/2.1_r2/android/widget/SeekBar.java you could look at that and AbsSeekBar source to see what it takes to add and handle a second thumb. — Squonk, Apr 26 '11 at 20:50
Hello MisterSquonk, I tried that but it is very complex to extend/ modify AbsSeekBar, I already create my own control using ImageView. It's very easy and simple — , May 09 '11 at 06:49
fully customize seekbar http://codingsignals.com/crystal-range-seekbar-in-android/ — Asif, Jul 19 '16 at 06:51

score 110 · Accepted Answer · edited Jan 19 '17 at 10:14

110

I too was looking for this, to no avail. So I made a new widget, feel free to use it: https://github.com/anothem/android-range-seek-bar

Screenshot of RangeSeekBar

edited Jan 19 '17 at 10:14

answered Jul 21 '11 at 09:45

Stephan Tittel

1,313
1
10
7

this one is awesome! It would be even more awesome if the start and end could be reversed and if it would maintain state (loaded from Preferences or something) – slinden77 Jul 09 '12 at 16:15
Anything like this but extending normal SeekBar? – powder366 May 28 '14 at 11:03
Thank you very much for allowing us to use this. I did have a question on how to get it on the layout though. In your example you had ` // add RangeSeekBar to pre-defined layout ViewGroup layout = (ViewGroup) findViewById(); layout.addView(seekBar);` but I wasn't sure how to get the viewgroup in the layout. Can you give an example of how to set the view in the layout? Thank you! (This really came out jumbled.. I apologize) – Brandon Aug 04 '15 at 21:05
1

@Brandon The example was meant to be as generic as possible. ViewGroup is a superclass of most layouts. Replace it with a specific layout of your choice - e.g. RelativeLayout. – Stephan Tittel Aug 05 '15 at 05:50
Stephan, later on in the evening I realized that is probably what you intended with the view group and not the actual item. Thank you for the quick response though! – Brandon Aug 05 '15 at 12:58
@StephanTittel, Thanks for your answer.it is working fine but i have one issue,time gap between the min n max value is 3.when time gap equals 3,range seek bar sliders are not moving to gether.how to do this?In my case both sliders not cross over. – Rajesh Mar 18 '16 at 14:12
2

Fully customize seek bar with two way http://codingsignals.com/crystal-range-seekbar-in-android/ – Asif Jul 21 '16 at 07:00
The link now goes to a "Google Code Archive" page. The source page is blank, the downloads page too. Does anyone have a copy of the code? – androidguy Dec 05 '16 at 06:39
@user3175580 it has been moved to https://github.com/anothem/android-range-seek-bar; I will edit the post. – Jan 19 '17 at 10:13
RangeSeekbar is a 1000-line abomination of terrible code and poor performance and should not be used. – Paul Lammertsma Dec 20 '17 at 16:25
1

This library doesn't seem to build correctly anymore. Also deprecated. I don't know why. – John61590 Apr 10 '18 at 23:53

Atte Backenhof · Answer 2 · 2013-08-05T10:47:42.527

27

"I too was looking for this, to no avail. So I made a new widget, feel free to use it: https://code.google.com/p/range-seek-bar/"

This example Stephan linked works great! However, the user has to press any of the thumbs to get a respons. I wanted that if the user pressed the bar, the closest thumb would move to that position and work like normal.

I implemented this in the example code like this:

private final Thumb getClosestThumb(float touchX)

{
    double xValue = screenToNormalized(touchX);        
    return (Math.abs(xValue - normalizedMinValue) < Math.abs(xValue - normalizedMaxValue)) ? Thumb.MIN : Thumb.MAX;
}

And in the "public boolean onTouchEvent(MotionEvent event)",

if(pressedThumb == null),
   pressedThumb = getClosestThumb(mDownMotionX);

edited Aug 05 '13 at 10:47

answered Aug 05 '13 at 09:33

Atte Backenhof

468
5
7

@StephanTittel, I have tried to do the same. please add this answer in your project, so no one will face issue like me.thanks for this. – Noundla Sandeep Nov 21 '13 at 11:17
Quite old post. I have one doubt. I wish the min value to be incremented or decremented everytime be 10. How to acheive that? – AnswerDroid Sep 22 '15 at 10:24
This component is a 1000-line abomination of terrible code and poor performance and should not be used. – Paul Lammertsma Dec 20 '17 at 16:24

score 3 · Answer 3 · edited Sep 03 '14 at 10:27

3

A windowed seek bar with left and right icons.
Presettable minimum window size and automatic anti crossover.

Screenshot of windowed-seek-bar

Mercurial repository at https://bitbucket.org/nimbusgb/windowed-seek-bar

edited Sep 03 '14 at 10:27

JJD

50,076
60
203
339

answered Jul 27 '11 at 08:33

nimbusgb

393
1
3
12

score 2 · Answer 4 · answered Oct 13 '16 at 06:35

2

I have used the anothem/android-range-seek-bar library

https://github.com/anothem/android-range-seek-bar

In xml

<org.florescu.android.rangeseekbar.RangeSeekBar
            android:id="@+id/pricebar_with_label"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            rsb:absoluteMinValue="20"
            rsb:absoluteMaxValue="150"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            />

answered Oct 13 '16 at 06:35

Nilesh

1,013
14
21

1

Add this sample in README pls :) – Gelldur Feb 08 '17 at 14:42
how to remove the label min / max ? – Jeff Bootsholz Jul 24 '17 at 07:54
@RajuGujarati add this property rsb:showLabels="false" – Sachin Tanpure Sep 26 '17 at 07:30
1

This component is a 1000-line abomination of terrible code and poor performance and should not be used. – Paul Lammertsma Dec 20 '17 at 16:24

score 2 · Answer 5 · answered Sep 19 '20 at 04:56

Incase you are using any of the material components such as: Snackbar, BottomNavigationView etc. you don't have to use another 3rd party library.

The material library also ships with RangeSlider which can be used to select a range of values.

Material library - implementation 'com.google.android.material:material:latestVersion'

Android Seekbar with two thumbs

5 Answers5

Linked

Related