Requesting guidance in creating custom SeekBar in Android. (like shown in the image)

Question

I have a task to create a SeekBar looking like this:

My question is: How to segment the seekbar like that? I have made custom seekbars before, but I don't know how to segment the bar like that, with lines extending beyond the seekbar's height.

I have stumbled across a library, the ComboSeekBar, but it doesn't help much.

Thanks in advance to anyone willing to help!

Cheers!

`setBackgroundDrawable()` could be an option, if you don't find more appropriate way to do it. — coolguy, Jan 03 '16 at 13:53

score 3 · Accepted Answer · answered Jan 03 '16 at 14:11

3

I already see two ways to do it

Using background Drawable

Create and choose your seekbar drawable using setBackgroundDrawable().
Use third-party libraries:

RangeSliderView: (min. SDK API 14):

https://github.com/channguyen/range-slider-view

RangeSeekbar:

https://github.com/dolphinwang/RangeSeekbar

RangeBar:

https://github.com/edmodo/range-bar

Check also this unfinished project: https://github.com/feelinglucky/RadioSeekBar

Hope it help

answered Jan 03 '16 at 14:11

piotrek1543

19,130
7
81
94

Thank you! I will try them now and deliver some feedback after! ^^ – Vlad Iancu Jan 03 '16 at 14:18
1

The RangeBar is exactly what I need, except is has 2 Thumbs, Do you happen to know if it is possible to remove one of them? The documentation does not say anything about that. – Vlad Iancu Jan 03 '16 at 14:43
@VladIancu, it's Github, you can ask an author, by creating a new issue :-) Glad that you find it useful – piotrek1543 Jan 03 '16 at 14:45
I'll try, but since the last update was in 2013, I doubt it will answer :( – Vlad Iancu Jan 03 '16 at 14:59

score 0 · Answer 2 · answered Jan 03 '16 at 15:35

For anyone needing to create a similar Seekbar like me:

This library was exactly what I needed, except the fact that it has 2 thumbs, and no way to eliminate one of them.

https://github.com/edmodo/range-bar

I have devised a little "hack" for this: When you initialize the Range-Bar, you can set the thumb indices via this method, as stated in the wiki:

RangeBar rangebar = (RangeBar) findViewById(R.id.rangebar);
rangebar.setThumbIndices(5,5); //indices example

And when a thumb index changes, in the following method you set the seekbar thumbs to the same position:

rangebar.setOnRangeBarChangeListener(new RangeBar.OnRangeBarChangeListener() {
@Override
public void onIndexChangeListener(RangeBar rangeBar, int leftThumbIndex, int rightThumbIndex) { 
    //Code using the leftThumbIndex and rightThumbIndex to update the index values.
    rangeBar.setThumbIndices(leftThumbIndex, leftThumbIndex);
    }
});

Hope it will be of use for anyone.

Thanks everyone for the help!

Cheers!

Requesting guidance in creating custom SeekBar in Android. (like shown in the image)

2 Answers2

RangeSliderView: (min. SDK API 14):

RangeSeekbar:

RangeBar: