Snailer Snailer - 1 year ago 173
Android Question

How can I get a working vertical SeekBar in Android?

I've implemented the commonly-pointed-to VerticalSeekBar post here. As it is, the SeekBar operates a little quirky. Here is my slightly adapted

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

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 Source

Here is a working VerticalSeekBar implementation:

package android.widget;

import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;

public class VerticalSeekBar extends SeekBar {

    public VerticalSeekBar(Context 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);

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

    protected void onDraw(Canvas c) {
        c.translate(-getHeight(), 0);


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

            case MotionEvent.ACTION_CANCEL:
        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:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download