How to make a vertical SeekBar in Android? How to make a vertical SeekBar in Android? android android

How to make a vertical SeekBar in Android?


  1. For API 11 and later, can use seekbar's XML attributes(android:rotation="270") for vertical effect.

    <SeekBarandroid:id="@+id/seekBar1"android:layout_width="match_parent"android:layout_height="wrap_content"android:rotation="270"/>
  2. For older API level (ex API10), only use Selva's answer:
    https://github.com/AndroSelva/Vertical-SeekBar-Android


Here is a very good implementation of vertical seekbar.Have a look.

http://560b.sakura.ne.jp/android/VerticalSlidebarExample.zip

And Here is my own implementation for Vertical and Inverted Seekbar based on this

https://github.com/AndroSelva/Vertical-SeekBar-Android

protected void onDraw(Canvas c) {    c.rotate(-90);    c.translate(-getHeight(),0);    super.onDraw(c);}@Overridepublic 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);            Log.i("Progress",getProgress()+"");            onSizeChanged(getWidth(), getHeight(), 0, 0);            break;        case MotionEvent.ACTION_CANCEL:            break;    }    return true;}


Working example

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   public synchronized void setProgress(int progress)  // it is necessary for calling setProgress on click of a button   {    super.setProgress(progress);    onSizeChanged(getWidth(), getHeight(), 0, 0);    }    @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;    }}

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"  />

Make sure to create a package android.widget and create VerticalSeekBar.java under this package