custom seekbar with multi color

Question

I am trying to create custom seek bar in android with multicolor. I tried below code

customseekbar.java

int proBarWidth = getWidth();
int proBarHeight = getHeight();
int thumboffset = getThumbOffset();
int lastproX = 0;
int proItemWidth, proItemRight;
for (int i = 0; i < mproItemsList.size(); i++) {
proItem proItem = mproItemsList.get(i);
Paint proPaint = new Paint();
proPaint.setColor(getResources().getColor(proItem.color));

proItemWidth = (int) (proItem.proItemPercentage
        * proBarWidth / 100);

proItemRight = lastproX + proItemWidth;

// for last item give right of the pro item to width of the
// pro bar
if (i == mproItemsList.size() - 1
        && proItemRight != proBarWidth) {
    proItemRight = proBarWidth;
}
Rect proRect = new Rect();
proRect.set(lastproX, thumboffset / 2, proItemRight,
        proBarHeight - thumboffset / 2);
canvas.drawRect(proRect, proPaint);
lastproX = proItemRight;
}
super.onDraw(canvas);

view

<mypackage.customseekbar
android:id="@+id/customseekbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="100"
android:progress="0"
android:progressDrawable="@android:color/transparent"
android:thumb="@drawable/seek_thumb_normal"
android:thumbOffset="12dp" />

I used this method in MainMenuActivity. It gives me result something like below. I referred this link https://azzits.wordpress.com/2013/11/17/customseekbar/

But I am expecting something like below

Is there any way to draw this vertical gapped lines? How can I draw this vertical lines?

I think that you could use [This Library](https://github.com/warkiz/IndicatorSeekBar), it's more easy and you have more Custom SeekBar for choose !! — R. García, Apr 27 '18 at 12:09
@AjayPunekar check this https://stackoverflow.com/questions/30868393/progress-bar-with-divider — AskNilesh, Apr 27 '18 at 12:11
@NileshRathod Thanks for link. I checked this link actually he looking for round corner seek bar. I am looking for something different. The main challenge is to show these vertical lines. — Ajay, Apr 27 '18 at 12:15
@AjayPunekar check this also https://github.com/castorflex/SmoothProgressBar — AskNilesh, Apr 27 '18 at 12:40
Have done something similar to that by putting the `SeekBar` background transparent and using `RelativeLayout` to show custom drawables for the background. Also the thumb can have it's own custom `Drawable` implemented and changes color based on the progress. — ahasbini, May 05 '18 at 09:53
Check this one https://github.com/rorschach/ShaderSeekArc it is same as you want but in circular form maybe you can edit it to be horizontal — UsamaAmjad, May 06 '18 at 00:47

score 3 · Answer 1 · answered May 06 '18 at 00:26

Progress bar with divider is a good place to look as mentioned by @Nilesh Rathod. Rather than using canvas.drawRect() you can use canvas.drawRoundRect(); Short example:

for (int i = 0; i < NUM_SEGMENTS; i++) {
        float loLevel = i / (float) NUM_SEGMENTS;
        float hiLevel = (i + 1) / (float) NUM_SEGMENTS;
        if (loLevel <= level && level <= hiLevel) {
            float middle = mSegment.left + NUM_SEGMENTS * segmentWidth * (level - loLevel);
            canvas.drawRoundRect(mSegment.left, mSegment.top, middle, mSegment.bottom, mPaint);
            mPaint.setColor(mBackground);
            canvas.drawRoundRect(middle, mSegment.top, mSegment.right, mSegment.bottom, mPaint);
        } else {
            canvas.drawRoundRect(mSegment, mPaint);
        }
        mSegment.offset(mSegment.width() + gapWidth, 0);
    }

I give full credit to the code above to the creator of the aforementioned link and don't claim any of it as mine as I am just illustrating the change that should be made to reach the desired effect. Please let me know if you run into further issues.

custom seekbar with multi color

1 Answers1

Linked