Search code examples
androidandroid-xmlandroid-custom-view

How to create custom SeekBar with TextView in Android?


enter image description here

enter image description here

How can I create movable TextView with a SeekBar or ProgressBar in Android?


Solution

  • Instead of textview you can create a bitmap with text written on it. Something like this

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