How to Get a Working Vertical Seekbar in Android

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 in Android

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

Vertical Seekbar

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 make a vertical range seekbar?

ok I found this library:

https://github.com/edmodo/range-bar

<com.edmodo.rangebar.RangeBar
android:id="@+id/rb"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:rotation="90"
app:tickCount="16"
/>

int left_index = rb.getLeftIndex();

int right_index = rb.getRightIndex();

hope it will be usefull



Related Topics



Leave a reply



Submit