SeekBar Thumb position issue

Question

I'm trying to do a "labeled" thumb for my Seekbar. The objective is to customize a text above the thumb every time the Seekbar position changes.

I'm doing this:

        ...
        seekBar = (SeekBar) findViewById(R.id.bet_seek_bar);
        seekBar.setMax(10);
        setSeekBarLabel("0");
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {

            @Override
            public void onStopTrackingTouch(SeekBar seekBar)
            {

            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar)
            {

            }

            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser)
            {
                setSeekBarLabel(String.valueOf(progress));
            }
        });
    }

    private void setSeekBarLabel(String text)
    {
        BitmapDrawable thumb = Utils.writeOnBitmap(thumbBmp, text, 0, 0, thumbLablePaint);
        seekBar.setThumb(thumb);
    }

After running it, and touch the bar, I'm getting this:

screenshot

I DON'T CARE right now about any text issue (not writing one, porition, etc).

I DO CARE about thumb position relative to the bar progress.

The thumb position should be where the green bar ends. What am I missing?

Regards.

Nice library on github https://github.com/techery/progresshint — Maor Hadad, Sep 20 '15 at 03:22

score 16 · Accepted Answer · answered Dec 17 '12 at 17:45

I've ended up extending from SeekBar, and overriding the onMeasure() and onDraw methods(), that was the only way I've found to so the label/thumb thing work.

Posting it to help others:

...
    @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);
        }
    }

Result:

result

WHere is the other variables declaired... can you post full solution ? — Pankaj Kumar, Nov 08 '13 at 06:08
@Cheborra: i am unable to set number and circle image on it. can you please guide me or can you post full code for this? thanks for help in advance. — Mahaveer Muttha, Nov 14 '13 at 12:17
I suggest that you post your code in a question, so I can see it and help you better. — Cheborra, Nov 14 '13 at 18:33
use this link to get variable declarations http://stackoverflow.com/questions/18574271/create-custom-seekbar-in-android/21373650#21373650 — Thushara, Apr 01 '14 at 12:21
Where is the labelText variable defined? Also how to use above code? — Shrikant, Jul 11 '14 at 06:20

score 0 · Answer 2 · answered Dec 14 '12 at 23:25

0

Pass int progress to the method where you set drawable to the seekBar and use setProgress() method:

private void setSeekBarLabel(String text, int progress)
{
    BitmapDrawable thumb = Utils.writeOnBitmap(thumbBmp, text, 0, 0, thumbLablePaint);
    seekBar.setThumb(thumb);
    seekBar.setProgress(progress);
}

and add the second argument to the calling method:

setSeekBarLabel(String.valueOf(progress), progress);

answered Dec 14 '12 at 23:25

Marcin S.

11,161
6
50
63

Nop, I'm getting the same result adding the setProgress() thing – Cheborra Dec 15 '12 at 02:25

SeekBar Thumb position issue

2 Answers2

Linked