03/10/13 Vertical seek bar or slider in android, as android doesn' t provide seek bar orientation property

hoodaandroid.blogspot.com.br/2012/10/vertical-seek-bar-or-slider-in-android.html 1/10
5th October 2012
As we know that android doesn't provide any vertical implementation of SeekBar,
may be they have left it to developers :P . Well so in many cases we need so that is
should be vertical instead of horizontal. Here we will implement the simplest way we
can achieve it.
It will be discussed in two parts:-
Lets go ahead with the first step and create a project that will have the vertical slider
Create a new project and name it as
Project Name : VerticalSliderAndroid
Package Name : com.example.verticalsliderandroid
Main Activity : VerticalSliderActivity.java
And create another class in the same package:- VerticalSeekBar.java
The structure looks like this
[http://2.bp.blogspot.com/-
U8OBUIXpi0w/UG8fAiEYryI/AAAAAAAAAGQ/6sJGA9swNGo/s1600/Screen+Shot+2012-
Vertical seek bar or slider in android,
as android doesn't provide seek bar
orientation property
Usefulness :-
1. Create a project
2. Place the code given in respective files
1. Create a project :-
03/10/13 Vertical seek bar or slider in android, as android doesn' t provide seek bar orientation property
hoodaandroid.blogspot.com.br/2012/10/vertical-seek-bar-or-slider-in-android.html 2/10
10-05+at+11.22.47+PM.png]
a) VerticalSliderActivity.java
package com.example.verticalsliderandroid;
import android.os.Bundle;
import android.app.Activity;
import android.widget.SeekBar;
import android.widget.TextView;
import android.widget.SeekBar.OnSeekBarChangeListener;
public class VerticalSliderActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
final TextView sliderText = (TextView)findViewById(R.id.verticalSeekbarText);
2. Place the code given in respective files
03/10/13 Vertical seek bar or slider in android, as android doesn' t provide seek bar orientation property
hoodaandroid.blogspot.com.br/2012/10/vertical-seek-bar-or-slider-in-android.html 3/10
sliderText.setTextSize(48);
VerticalSeekBar verticalSeebar = (VerticalSeekBar)findViewById(R.id.verticalSeekbar
verticalSeebar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {

@Override
public void onStopTrackingTouch(SeekBar seekBar) {
}

@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}

@Override
public void onProgressChanged(SeekBar seekBar, int progress,
boolean fromUser) {
sliderText.setText(""+progress);
}
});
}
03/10/13 Vertical seek bar or slider in android, as android doesn' t provide seek bar orientation property
hoodaandroid.blogspot.com.br/2012/10/vertical-seek-bar-or-slider-in-android.html 4/10
}
b) VerticalSeekBar.java
package com.example.verticalsliderandroid;
import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.SeekBar;
public class VerticalSeekBar extends SeekBar {
public VerticalSeekBar(Context context) {
super(context);
}
03/10/13 Vertical seek bar or slider in android, as android doesn' t provide seek bar orientation property
hoodaandroid.blogspot.com.br/2012/10/vertical-seek-bar-or-slider-in-android.html 5/10
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);
03/10/13 Vertical seek bar or slider in android, as android doesn' t provide seek bar orientation property
hoodaandroid.blogspot.com.br/2012/10/vertical-seek-bar-or-slider-in-android.html 6/10
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;
03/10/13 Vertical seek bar or slider in android, as android doesn' t provide seek bar orientation property
hoodaandroid.blogspot.com.br/2012/10/vertical-seek-bar-or-slider-in-android.html 7/10
}
return true;
}
}
c) main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:id="@+id/verticalSeekbarText"
android:padding="@dimen/padding_medium"
android:text="Value"
03/10/13 Vertical seek bar or slider in android, as android doesn' t provide seek bar orientation property
hoodaandroid.blogspot.com.br/2012/10/vertical-seek-bar-or-slider-in-android.html 8/10
tools:context=".VerticalSliderActivity" />
<com.example.verticalsliderandroid.VerticalSeekBar
android:id="@+id/verticalSeekbar"
android:max="255"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_marginRight="5dp"
android:layout_marginTop="30dp"
android:layout_marginBottom="30dp"
android:progress="0" />
</RelativeLayout>
Thats all on the coding side.Now just run the code and get the following output:-
3.Output:-
03/10/13 Vertical seek bar or slider in android, as android doesn' t provide seek bar orientation property
hoodaandroid.blogspot.com.br/2012/10/vertical-seek-bar-or-slider-in-android.html 9/10
[http://1.bp.blogspot.com/-
m0B4ZzyA_Ck/UG8ijNOwH0I/AAAAAAAAAGk/H372j1ZmIHg/s1600/Screen+Shot+2012-
10-05+at+11.37.22+PM.png]
[http://4.bp.blogspot.com/-
IrdIbQjmoWw/UG8iljCNTUI/AAAAAAAAAGs/QFcawvzUSNE/s1600/Screen+Shot+2012-10-
05+at+11.37.42+PM.png]
Thats all cheers now scroll up and down the slider and see the value changing in
the TextView. Cheersss :)
Posted 5th October 2012 by amit hooda

Replies
4
View comments
Anonymous 2 April 2013 22:26
It doesn't work. You don't define @dimen/padding_medium that is used in the
XML file in strings. Not sure how to make it work.
Reply
amit hooda 26 April 2013 21:00
03/10/13 Vertical seek bar or slider in android, as android doesn' t provide seek bar orientation property
hoodaandroid.blogspot.com.br/2012/10/vertical-seek-bar-or-slider-in-android.html 10/10
Reply
Replies
Reply
Enter your comment...
Comment as:
Google Account
Publish

Preview
i think you are just beginning with android development, so instead of
@dimen/padding_medium just use some value in dp, say like 30dp
or something according to ur needs
Broly 10 June 2013 08:24
does this allow you to implement more than one vertical seekbar on the same
layout?
Reply
amit hooda 14 June 2013 01:21
yes you can have as many seekbar as u wnt