How can I get a working vertical SeekBar in Android?

Question

I've implemented the commonly-pointed-to VerticalSeekBar post here. As it is, the SeekBar operates a little quirky. Here is my slightly adapted onTouchEvent() from that example:

public boolean onTouchEvent(MotionEvent event)     {             xPos = event.getX();             yPos = event.getY();             oOffset = this.getThumbOffset();             oProgress = this.getProgress();              //Code from example - Not working             //this.setThumbOffset( progress * (this.getBottom()-this.getTop()) );              this.setProgress((int)(29*yPos/this.getBottom()));             return true;     } 

I've managed to implement one VerticalSeekBar in which the progress updates as expected and is fully-functional, but the thumb does not follow suit. This is only a graphical glitch, so I'm overlooking it for now. But, it would be nice to have that working. This SeekBar has max = 20.

However, I tried implementing another VerticalSeekBar with max = 1000. Obviously, it uses the same code, so you'd assume the same behavior. I'm only able to achieve a progress of 0~35, even as my finger slides beyond the SeekBar and eventually off the screen. If I just tap near the end of the progress bar (which should be progress ~ 900) it returns a progress of about 35 and the yellow progress bar reflects that value by staying near the top.

My question is: Does anyone have a link to a working vertical SeekBar, or know how to adapt this particular example?

Answer 1

Here is a working VerticalSeekBar implementation:

package android.widget;  import android.content.Context; import android.graphics.Canvas; import android.util.AttributeSet; import android.view.MotionEvent;  public class VerticalSeekBar extends SeekBar {      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);     }      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(heightMeasureSpec, widthMeasureSpec);         setMeasuredDimension(getMeasuredHeight(), getMeasuredWidth());     }      protected void onDraw(Canvas c) {         c.rotate(-90);         c.translate(-getHeight(), 0);          super.onDraw(c);     }      @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:                 setProgress(getMax() - (int) (getMax() * event.getY() / getHeight()));                 onSizeChanged(getWidth(), getHeight(), 0, 0);                 break;              case MotionEvent.ACTION_CANCEL:                 break;         }         return true;     } } 

To implement it, create a new class in your project, choosing the right package:

There, paste the code and save it. Now use it in your XML layout:

<android.widget.VerticalSeekBar   android:id="@+id/seekBar1"   android:layout_width="wrap_content"   android:layout_height="200dp"   />