Android seekbar with custom thumb having dynamic text inside it

Question

I want to create android custom SeekBar having thumb with text inside it to show current seek position.

Here is my code:

SeekBar sb;

@Override
public void onCreate(Bundle savedInstanceState){
    super.onCreate(savedInstanceState);
    setContentView(R.layout.custom_seek_bar_activity);

    sb = (SeekBar)findViewById(R.id.slider);
    sb.setMax(100);
    sb.setProgress(10);
    BitmapDrawable bd = writeOnDrawable(R.drawable.star2, Double.toString(50));

    sb.setThumb(bd);

    sb.setOnSeekBarChangeListener(new OnSeekBarChangeListener(){
        @Override
        public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser)
        {
            int pos = sb.getProgress();
            double star = pos/(20.0);
            TextView tv = (TextView)findViewById(R.id.percent);
            tv.setText(Double.toString(star)+"%");
            BitmapDrawable bd = writeOnDrawable(R.drawable.star2, Double.toString(star));
            bd.setBounds(new Rect(0,0, 
                bd.getIntrinsicWidth(), 
                bd.getIntrinsicHeight()
            ));
            seekBar.setThumb(bd);
        }

        @Override
        public void onStartTrackingTouch(SeekBar arg0) {
            // TODO Auto-generated method stub

        }

        @Override
        public void onStopTrackingTouch(SeekBar arg0) {
            // TODO Auto-generated method stub

        }
    });

}   

public BitmapDrawable writeOnDrawable(int drawableId, String text){

    Bitmap bm = BitmapFactory.decodeResource(getResources(), drawableId).copy(Bitmap.Config.ARGB_8888, true);

    Paint paint = new Paint(); 
    paint.setStyle(Style.FILL);  
    paint.setColor(Color.BLACK); 
    paint.setTextSize(10); 

    Canvas canvas = new Canvas(bm);
    canvas.drawText(text, 0, bm.getHeight()/2, paint);

    return new BitmapDrawable(bm);
}

but when I move thumb it goes to the beginning of the seek bar. Does anyone have solution to move custom thumb with seekbar position?

Answer 1

I use SeekBar to display a timer countdown in my app. Inside the timer thumb I show the current SeekBar progress number using the below code:

    SeekBar timerBar = (SeekBar) findViewById(R.id.seekBarTimer);
    if (timerBar != null) {
        timerBar.setMax((int) (Settings.countdownSeconds + 1));
        timerBar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {

            @Override
            public void onStopTrackingTouch(SeekBar arg0) {
            }

            @Override
            public void onStartTrackingTouch(SeekBar arg0) {
            }

            @Override
            public void onProgressChanged(SeekBar timerBar, int arg1, boolean arg2) {
                Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.seek_thumb);
                Bitmap bmp = bitmap.copy(Bitmap.Config.ARGB_8888, true);
                Canvas c = new Canvas(bmp);
                String text = Integer.toString(timerBar.getProgress());
                Paint p = new Paint();
                p.setTypeface(Typeface.DEFAULT_BOLD);
                p.setTextSize(14);
                p.setColor(0xFFFFFFFF);
                int width = (int) p.measureText(text);
                int yPos = (int) ((c.getHeight() / 2) - ((p.descent() + p.ascent()) / 2));
                c.drawText(text, (bmp.getWidth()-width)/2, yPos, p);
                timerBar.setThumb(new BitmapDrawable(getResources(), bmp));
            }
        });
        timerBar.setProgress(0);
    }

The R.drawable.seek_thumb drawable is my thumb drawable.