Android Vertical Seekbar

Android Vertical Seekbar

Step 1 : Create a Android Project Vertical_Seekbar

Step 2 : Create a class VerticalSeekbar.java

package com.vertical_seekbar;

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 {

private OnSeekBarChangeListener myListener;

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 void setOnSeekBarChangeListener(OnSeekBarChangeListener mListener){

    this.myListener = mListener;

}

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:

            if(myListener!=null)

                myListener.onStartTrackingTouch(this);

            break;

        case MotionEvent.ACTION_MOVE:

            setProgress(getMax() - (int) (getMax() * event.getY() / getHeight()));

            onSizeChanged(getWidth(), getHeight(), 0, 0);

            myListener.onProgressChanged(this, getMax() - (int) (getMax() * event.getY() / getHeight()), true);

            break;

        case MotionEvent.ACTION_UP:

            myListener.onStopTrackingTouch(this);

            break;

        case MotionEvent.ACTION_CANCEL:

            break;

    }

    return true;

}

}

Step 3 : Create Main Activity class.

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

import android.widget.SeekBar;

public class MainActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

// Seekbar declare

SeekBar sb = (SeekBar)findViewById(R.id.seekBar1);

sb.setMax(0);

sb.setMax(100);

sb.setProgress(85);

sb.setEnabled(false);

} 

}

Step 4 : Create a layout activity_main.xml. 

<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:orientation="vertical" >

    <TextView

        android:id="@+id/textView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/hello_world" />

    <LinearLayout

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:gravity="center"

        android:orientation="horizontal" >

        <YOUR_PACKAGE_NAME.VerticalSeekBar

            android:id="@+id/seekBar1"

            style="@style/tallerBarStyle"

            android:layout_width="wrap_content"

            android:layout_height="200dp"

            android:textDirection="ltr" />

        <LinearLayout

            android:layout_width="wrap_content"

            android:layout_height="match_parent"

            android:layout_margin="10dp"

            android:orientation="vertical"

            android:visibility="visible"

            android:weightSum="12" >

            <TextView

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_weight="2"

                android:gravity="center"

                android:text="100"

                android:textStyle="bold" />

            <TextView

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_weight="2"

                android:gravity="center"

                android:text="80"

                android:textStyle="bold" />

            <TextView

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_weight="2"

                android:gravity="center"

                android:text="60"

                android:textStyle="bold" />

            <TextView

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_weight="2"

                android:gravity="center"

                android:text="40"

                android:textStyle="bold" />

            <TextView

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_weight="2"

                android:gravity="center"

                android:text="20"

                android:textStyle="bold" />

            <TextView

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_weight="2"

                android:gravity="center"

                android:text="0"

                android:textStyle="bold" />

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

Step 5 : Style for the seekbar.

<style name="tallerBarStyle" parent="@android:style/Widget.SeekBar">

        <item name="android:indeterminateOnly">false</item>

        <item name="android:progressDrawable">@android:drawable/progress_horizontal</item>

        <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>

        <item name="android:minHeight">20dp</item>

        <item name="android:maxHeight">40dp</item>

</style>

Here is the screenshot of an vertical seekbar.