HB Blog 135: Android Vertical Seekbar Tutorial.

Android and all mobile technologies are changing very rapidly and users need more attractive and new kinda control views. Most of us do get bored with same things everywhere.
A SeekBar is an extension of ProgressBar that adds a draggable thumb. The user can touch the thumb and drag left or right to set the current progress level or use the arrow keys.

But, lets say we need a seekbar view, a custom view which can progress by dragging thumb top or bottom for changing progress level. In these post, I will show how to create custom vertical seekbar in Android.

Refer the below link for complete sample code:-

Download Sample Code

Have a look on few code snippets,

//CustomVerticalSeekbar.java

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70

package com.harshalbenake.verticalseekbar.views; import android.content.Context; import android.graphics.Canvas; import android.util.AttributeSet; import android.view.MotionEvent; import android.widget.SeekBar; public class CustomVerticalSeekbar extends SeekBar { public CustomVerticalSeekbar(Context context) { super(context); } public CustomVerticalSeekbar(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } public CustomVerticalSeekbar(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; } }

//MainActivity.java

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

package com.harshalbenake.verticalseekbar; import android.app.Activity; import android.os.Bundle; import android.widget.SeekBar; import com.harshalbenake.verticalseekbar.views.CustomVerticalSeekbar; public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); CustomVerticalSeekbar customVerticalSeekbar=(CustomVerticalSeekbar)findViewById(R.id.customverticalseekbar); customVerticalSeekbar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() { @Override public void onProgressChanged(SeekBar seekBar, int progress, boolean userAction) { } @Override public void onStartTrackingTouch(SeekBar seekBar) { } @Override public void onStopTrackingTouch(SeekBar seekBar) { } }); } }

//activity_main.xml

1 2 3 4 5 6 7 8 9 10 11 12 13

<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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" android:background="@android:color/black" android:gravity="center_horizontal"> <com.harshalbenake.verticalseekbar.views.CustomVerticalSeekbar android:id="@+id/customverticalseekbar" android:layout_width="wrap_content" android:layout_height="match_parent" /> </LinearLayout>