Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vertical Seekbar in Android

I am working on a Player and I want to use Vertical Seekbar to control volume level. Can anybody tell me how to align seekbar vertically, If you have some code it would be great.

like image 204
Muhammad Nabeel Arif Avatar asked Oct 26 '25 14:10

Muhammad Nabeel Arif


2 Answers

Here is a good code to align seek-bar vertically:
Vertical Seekbar

like image 170
Muhammad Nabeel Arif Avatar answered Oct 29 '25 05:10

Muhammad Nabeel Arif


I've made a vertical SeekBar by overriding the onDraw method and flipping it 90 degrees

VerticalSeekBar

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

/*@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); 
    }*/

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

Use it in your XML layout:

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

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

<SeekBar
android:id="@+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:rotation="270"/>
like image 25
Zar E Ahmer Avatar answered Oct 29 '25 05:10

Zar E Ahmer



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!