Modifying the Android Seekbar Widget to Operate Vertically

Modifying the Android seekbar widget to operate vertically

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

For older API level (ex API10),use: https://github.com/AndroSelva/Vertical-SeekBar-Android or see this sample here

You also have to update it's height & width as suggest by Iftikhar

In order 

seekBar.setLayoutParams(
                new ViewGroup.LayoutParams(convertDpToPixels(1.0f,mContext), ViewGroup.LayoutParams.WRAP_CONTENT));

//haven't tested..

where 

public static int convertDpToPixels(float dp, Context context){
    Resources resources = context.getResources();
    return (int) TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_DIP,
            dp, 
            resources.getDisplayMetrics()
    );
}

How to make a vertical SeekBar in 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);
}

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

How can I get a working vertical SeekBar in Android?

Here is a working VerticalSeekBar implementation:

package android.widget;

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

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

To implement it, create a new class in your project, choosing the right package:

Sample Image

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

Vertical seekbar showing as a horizontal one in Android Studio

You can try the following library to create a custom vertical seekbar,

dependencies {
    compile 'com.h6ah4i.android.widget.verticalseekbar:verticalseekbar:0.7.0'
}

To use in your xml layout,

<!-- This library requires pair of the VerticalSeekBar and VerticalSeekBarWrapper classes -->
<com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBarWrapper
    android:layout_width="wrap_content"
    android:layout_height="150dp">
    <com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBar
        android:id="@+id/mySeekBar"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:splitTrack="false"
        app:seekBarRotation="CW90" /> <!-- Rotation: CW90 or CW270 -->
</com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBarWrapper>

Reference: https://github.com/h6ah4i/android-verticalseekbar

Update: To customize the seekbar, you need to add the android:thumb & android:progressDrawable. First of all, Create the following drawables into the drawable folder,

seekbar_background

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#404040" />
            <corners android:radius="40dp" />
        </shape>
    </item>
</selector>

seekbar_progress

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
    <stroke
        android:width="4dp"
        android:color="#777777" />
</shape>

seekbar

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@android:id/background"
        android:drawable="@drawable/seekbar_background"
        android:left="2dp">
    </item>
    <item android:id="@android:id/progress">
        <clip android:drawable="@drawable/seekbar_progress" />
    </item>
</layer-list>

and finally,

seekbar_thumb

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="#7FD319" />
            <size
                android:width="15dp"
                android:height="15dp" />
        </shape>
    </item>
</layer-list>

Now update your seekbar with the thumb & progreeDrawable,

 <!-- This library requires pair of the VerticalSeekBar and VerticalSeekBarWrapper classes -->
        <com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBarWrapper
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="center">

            <com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBar
                android:id="@+id/opacity_seek"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@null"
                android:progressDrawable="@drawable/seekbar"
                android:splitTrack="false"
                android:thumb="@drawable/seekbar_thumb_green"
                app:seekBarRotation="CW270" /> <!-- Rotation: CW90 or CW270 -->
        </com.h6ah4i.android.widget.verticalseekbar.VerticalSeekBarWrapper>

How to add vertical lines above seekbar in android

xml file

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center">

            <View
                android:id="@+id/view1"
                android:layout_width="3dp"
                android:layout_height="match_parent"
                android:background="#000000" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center">

            <View
                android:id="@+id/view2"
                android:layout_width="3dp"
                android:layout_height="match_parent"
                android:background="#000000" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center">

            <View
                android:id="@+id/view3"
                android:layout_width="3dp"
                android:layout_height="match_parent"
                android:background="#000000" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center">

            <View
                android:id="@+id/view4"
                android:layout_width="3dp"
                android:layout_height="match_parent"
                android:background="#000000" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center">

            <View
                android:id="@+id/view5"
                android:layout_width="3dp"
                android:layout_height="match_parent"
                android:background="#000000" />

        </LinearLayout>

    </LinearLayout>

    <SeekBar
        android:id="@+id/seekbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp" />

</LinearLayout>

Java File

public class SampleActivity extends AppCompatActivity {

    private SeekBar seekBar;
    private View view1;
    private View view2;
    private View view3;
    private View view4;
    private View view5;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.sample);
        initView();
    }

    private void initView() {
        seekBar = (SeekBar) findViewById(R.id.seekbar);
        view1 = findViewById(R.id.view1);
        view2 = findViewById(R.id.view2);
        view3 = findViewById(R.id.view3);
        view4 = findViewById(R.id.view4);
        view5 = findViewById(R.id.view5);

        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
                changeColor(i);
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });
    }

    private void changeColor(final int i) {
        if (i == 0) {
            view1.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
            view2.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
            view3.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
            view4.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
            view5.setBackgroundColor(ContextCompat.getColor(this, R.color.black));

        } else if (i > 0 && i <= 20) {
            view1.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view2.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
            view3.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
            view4.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
            view5.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
        } else if (i > 20 && i <= 40) {
            view1.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view2.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view3.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
            view4.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
            view5.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
        } else if (i > 40 && i <= 60) {
            view1.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view2.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view3.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view4.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
            view5.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
        } else if (i > 60 && i <= 80) {
            view1.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view2.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view3.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view4.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view5.setBackgroundColor(ContextCompat.getColor(this, R.color.black));
        } else if (i > 80 && i <= 100) {
            view1.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view2.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view3.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view4.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
            view5.setBackgroundColor(ContextCompat.getColor(this, R.color.green));
        }
    }
}

color.xml

 <color name="green">#29BC4F</color>
    <color name="black">#000000</color>

Sample Image

Vertical Seekbar fill parent won't work

i got the vertical seekbar working only with diffrent classes derived from Modifying the Android seekbar widget to operate vertically (thanks to pengwang) here are his zip files for the solution.

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

These vertical seekbars can now do fill_parent

Vertical Seekbar in Android

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

Vertical Seekbar


Related Topics

Android Google Maps API V2 Zoom to Current Location

How to Draw Road Directions Between Two Geocodes in Android Google Map V2

How to Change the Background Color Around a Dialogfragment

Android: How to Get a List of All Available Intent Filters

App Completely Restarting When Launched by Icon Press in Launcher

How to Get File Path from Sd Card in Android

Best Way to Manage the Progressdialog from Asynctask

Use Ffmpeg on Android

Android Multiple Selection Listview & Textview

Android: How to Programmatically Set the Size of a Layout

How to Access Localhost from a Genymotion Android Emulator

Whatsapp Like Collapsing Toolbar

How to Simulate Accelerometer in Android Emulator

Start a Fragment via Intent Within a Fragment

Need to Disable Expand on Collapsingtoolbarlayout for Certain Fragments

How to Put an Image in an Alertdialog? Android

How to Make My Own Custom Dialer in an Android Phone

Error Java.Lang.Runtimeexception: Stub! in Android with Fitnesse Testing


Leave a reply



Submit