androidandroid-seekbar

android Seekbar show progress value along the seekbar


I have a listview with seekbar, each seekbar represents 100% of a value of product. By moving the seekbar the % value can be changed, I want to show the change in value along the seekbar while the user is dragging the seekbar. I do not wish to add another text box where the value is updated.

I am more looking at options to show a small view on top of the seekbar pointer, which appears onStartTracking and disappears onStopTracking event.

Is there a way to achieve this?


Solution

  • Here is a one simple way,

    example:

    seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
                    @Override
                    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
    
                        int val = (progress * (seekBar.getWidth() - 2 * seekBar.getThumbOffset())) / seekBar.getMax();
                        textView.setText("" + progress);
                        textView.setX(seekBar.getX() + val + seekBar.getThumbOffset() / 2);
                        //textView.setY(100); just added a value set this properly using screen with height aspect ratio , if you do not set it by default it will be there below seek bar 
    
                    }
    

    or you can use Paint with your custom SeekBar class without any TextView

    Create a class

    import android.content.Context;
    import android.graphics.Canvas;
    import android.graphics.Color;
    import android.graphics.Paint;
    import android.util.AttributeSet;
    import android.widget.SeekBar;
    
    
    public class MySeekBar extends SeekBar {
        public MySeekBar (Context context) {
            super(context);
        }
    
        public MySeekBar (Context context, AttributeSet attrs, int defStyle) {
            super(context, attrs, defStyle);
        }
    
        public MySeekBar (Context context, AttributeSet attrs) {
            super(context, attrs);
        }
    
        @Override
        protected void onDraw(Canvas c) {
            super.onDraw(c);
            int thumb_x = (int) (( (double)this.getProgress()/this.getMax() ) * (double)this.getWidth());
            float middle = (float) (this.getHeight());
    
            Paint paint = new Paint();
            paint.setColor(Color.BLACK);
            paint.setTextSize(20);
            c.drawText(""+this.getProgress(), thumb_x, middle, paint);
        }
    }
    

    Set/create your SeekBar in your XML

      <yourPackageName.MySeekBar
                android:id="@+id/my_seek_bar"
                android:layout_width="300dp"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:layout_marginTop="26dp"
                android:max="10"/>
    

    Now from your Activity

    seekBar = (MySeekBar) findViewById(R.id.my_seek_bar);
    seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
        @Override
        public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
        }
    
        @Override
        public void onStartTrackingTouch(SeekBar seekBar) {
        }
    
        @Override
        public void onStopTrackingTouch(SeekBar seekBar) {
        }
    });