Android Seekbar with two thumbs
AndroidRangeSeekbarAndroid Problem Overview
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 ;)
Android Solutions
Solution 1 - Android
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
Solution 2 - Android
"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);
Solution 3 - Android
A windowed seek bar with left and right icons.
Presettable minimum window size and automatic anti crossover.
Mercurial repository at https://bitbucket.org/nimbusgb/windowed-seek-bar
Solution 4 - Android
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"
/>
Solution 5 - Android
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'