Android:How to custom the specific Seekbar like this?

Question

pic:

enter image description here

How should I do to custom the specific seekbar like the pic?

I think the point is:

When finger is moving on the seekbar, how to present a suspended view showing the progress.
There are some views which layer is same level to parent view of seekbar, these views are near the seekbar, would these views overlap the suspended view?

check android sdk, there is example with seekbars :) best way: in eclipse we press new>new android example project>you take api demos > you create project > then you run it on your phone :) then you sarch it. if you find it you can go to your eclipse code resources and search it to be able compare code with app in your phone :) — deadfish, Dec 05 '12 at 09:46
thanks your advise.I have searched a few information and know how to custom a normal seekbar. But this one i don't find how to work out. — Vince, Dec 05 '12 at 09:52

score 0 · Answer 1 · edited May 23 '17 at 10:24

Take a look at this answer: 13887556

It could be a good starting point. Try to extend SeekBar and override onMeasure() and onDraw methods():

@Override
protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
 {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    if (labelBackground != null)
    {

        viewWidth = getMeasuredWidth();
        barHeight = getMeasuredHeight();// returns only the bar height (without the label);
        setMeasuredDimension(viewWidth, barHeight + labelBackground.getHeight());
    }

}



@Override
protected synchronized void onDraw(Canvas canvas)
{
    if (labelBackground != null)
    {
        barBounds.left = getPaddingLeft();
        barBounds.top = labelBackground.getHeight() + getPaddingTop();
        barBounds.right = barBounds.left + viewWidth - getPaddingRight() - getPaddingLeft();
        barBounds.bottom = barBounds.top + barHeight - getPaddingBottom() - getPaddingTop();

        progressPosX = barBounds.left + ((float) this.getProgress() / (float) this.getMax()) * barBounds.width();

        labelPos.x = (int) progressPosX - labelOffset;
        labelPos.y = getPaddingTop();

        progressDrawable = getProgressDrawable();
        progressDrawable.setBounds(barBounds.left, barBounds.top, barBounds.right, barBounds.bottom);
        progressDrawable.draw(canvas);

        labelTextPaint.getTextBounds(labelText, 0, labelText.length(), labelTextRect);

        canvas.drawBitmap(labelBackground, labelPos.x, labelPos.y, labelBackgroundPaint);
        canvas.drawText(labelText, labelPos.x + labelBackground.getWidth() / 2 - labelTextRect.width() / 2, labelPos.y + labelBackground.getHeight() / 2 + labelTextRect.height() / 2, labelTextPaint);

        thumbX = (int) progressPosX - getThumbOffset();
        thumbDrawable.setBounds(thumbX, barBounds.top, thumbX + thumbDrawable.getIntrinsicWidth(), barBounds.top + thumbDrawable.getIntrinsicHeight());
        thumbDrawable.draw(canvas);
    } else
    {
        super.onDraw(canvas);
    }

Android:How to custom the specific Seekbar like this?

1 Answers1