Need some assistance for developing a vertical seekbar which starts from the middle and move to both sides. [50 , 0 , 50]

Question

I was developing an Equalizer application and need to create a vertical seekbar which starts from the middle. I searched for some vertical seekbars but the onDraw is designed for seekbars that starts from the bottom and move up. I need to modify the onDraw to make the seekbar starts from the middle and the progress thumb travel either side.

I tried modifying this code which is for a horizontal seekbar like this

but I need a vertical version of this and not sure about how to modify the onDraw() method. The attached code is for the horizontal version of the seekbar which I am trying to modify. Can some one guide me on how to work with rect.set() to make custom views or provide a working version.

private int seekbar_height = 6;
@Override
protected synchronized void onDraw(Canvas canvas) {

    rect.set(getThumbOffset(),
            (getHeight() / 2) - (seekbar_height / 2),
            getWidth() - getThumbOffset(),
            (getHeight() / 2) + (seekbar_height / 2));

    paint.setColor(Color.GRAY);

    canvas.drawRect(rect, paint);


    if (this.getProgress() > 13) {


        rect.set(getWidth() / 2,
                (getHeight() / 2) - (seekbar_height / 2),
                getWidth() / 2 + (getWidth() / 26) * (getProgress() - 13),
                getHeight() / 2 + (seekbar_height / 2));

        paint.setColor(ContextCompat.getColor(getContext(),R.color.color_polestar_accept));
        canvas.drawRect(rect, paint);

    }

    if (this.getProgress() < 13) {

        rect.set(getWidth() / 2 - ((getWidth() / 26) * (13 - getProgress())),
                (getHeight() / 2) - (seekbar_height / 2),
                getWidth() / 2,
                getHeight() / 2 + (seekbar_height / 2));

        paint.setColor(ContextCompat.getColor(getContext(),R.color.color_polestar_accept));
        canvas.drawRect(rect, paint);

    }

    super.onDraw(canvas);
}

score 0 · Answer 1 · answered Nov 14 '19 at 12:54

Finally I have figured out how to do that. Posting it for others in need

public class VerticalSeekBar extends SeekBar {

private Rect rect;
private Paint paint;
private int seekBarWidth;

public VerticalSeekBar(Context context) {
    super(context);
}

public VerticalSeekBar(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
}

public VerticalSeekBar(Context context, AttributeSet attrs) {
    super(context, attrs);
    rect = new Rect();
    paint = new Paint();
    seekBarWidth = (int) getResources().getDimension(
        R.dimen.vertical_equalizer_seekbar_width);
}

protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(h, w, oldh, oldw);
}

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


protected void onDraw(Canvas canvas) {

    rect.set(getWidth() / 2 - seekBarWidth / 2,
       0,
        getWidth() / 2 + seekBarWidth / 2,
        getHeight());

    paint.setColor(ContextCompat.getColor(getContext(), R.color.track_color));
    canvas.drawRect(rect, paint);

    if (this.getProgress() < getMax() / 2) {
        rect.set(getWidth() / 2 - seekBarWidth / 2,
            getHeight() / 2 - ((getHeight() / getMax()) * (getProgress() - getMax() / 2)),
            getWidth() / 2 + seekBarWidth / 2,
            (getHeight() / 2));
        paint.setColor(ContextCompat.getColor(getContext(), R.color.primary_seek_color));
        canvas.drawRect(rect, paint);
    }
    if (this.getProgress() > getMax() / 2) {
        rect.set(getWidth() / 2 - seekBarWidth / 2,
            (getHeight() / 2),
            getWidth() / 2 + seekBarWidth / 2,
            getHeight() / 2 - ((getHeight() / getMax()) * (getProgress() - getMax() / 2))
        );
        paint.setColor(ContextCompat.getColor(getContext(), R.color.primary_seek_color));
        canvas.drawRect(rect, paint);
    }
    canvas.rotate(-90);
    canvas.translate(-getHeight(), 0);
    super.onDraw(canvas);
}

@Override
public synchronized void setProgress(
    int progress) {
    super.setProgress(progress);
    onSizeChanged(getWidth(), getHeight(), 0, 0);
}

@Override
public boolean onTouchEvent(MotionEvent event) {
    if (!isEnabled()) {
        return false;
    }

    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
        case MotionEvent.ACTION_MOVE:
        case MotionEvent.ACTION_UP:

            int i = 0;
            i = getMax() - (int) (getMax() * event.getY() / getHeight());
            setProgress(i);
            onSizeChanged(getWidth(), getHeight(), 0, 0);
            break;

        case MotionEvent.ACTION_CANCEL:
            break;
    }
    return true;
}    }

Need some assistance for developing a vertical seekbar which starts from the middle and move to both sides. [50 , 0 , 50]

1 Answers1