How to Make a 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 vertical seekbar with progress text as thumb

Update to Khemraj's answer

Actually changing the thumb is the simple trick as said by Khemraj. But the problem is when rotating the canvas all its contents will rotate(simple logic). When updating the thumb also will reflect this problem. So the simple thing is to make a rotated CustomTextView.

Method to make thumb

 public Drawable getThumb(int progress) {
    int width = getWidth();

    ((TextView) mThumbView.findViewById(R.id.tvProgress)).setText(String.format(Locale.getDefault(), "%d%%", progress));
    mThumbView.measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED);
    Bitmap bitmap = Bitmap.createBitmap(mThumbView.getMeasuredWidth(), mThumbView.getMeasuredHeight(), Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    mThumbView.layout(0, 0, mThumbView.getMeasuredWidth(), mThumbView.getMeasuredHeight());
    mThumbView.draw(canvas);
    return new BitmapDrawable(getResources(), bitmap);
}

The layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center">

<ImageView
    android:layout_marginTop="30dp"
    android:id="@+id/imageView6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/seek_thumb_gray"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<com.samsung.lighting.presentation.ui.custom_views.RotatedTextView
    android:id="@+id/tvProgress"
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:gravity="center"
    android:text="20%"
    android:textColor="#000000"
    android:textSize="12sp"
    app:angle="90"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/imageView6" />
</android.support.constraint.ConstraintLayout>

The RotatedTextView

public class RotatedTextView extends AppCompatTextView {
private int mRotationAngle = 90;

@Override
protected void onDraw(Canvas canvas) {
    if (mRotationAngle == 90) {
        canvas.rotate(mRotationAngle);
        canvas.translate(0, -getWidth());
    } else if (mRotationAngle == -90) {
        canvas.rotate(mRotationAngle);
        canvas.translate(-getHeight(), 0);
    }
    super.onDraw(canvas);
} 
}

So first we will rotate the Text to 90 or -90 degrees and set as thumb to VerticalSeekBar and in vertical seekbar rotate the canvas to 90 or -90 degrees. So finally we will get the actual result

Here I posted the working example.

Thanks, Khemraj

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

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


Related Topics

Couldn't Locate Lint-Gradle-Api-26.1.2.Jar for Flutter Project

How to Make Alarm Manager Work When Android 6.0 in Doze Mode

Android Read Browser History

How to Get All Android Contacts But Without Those Which Are on Sim

How to Set Internet Options for Android Emulator

Gradle Build Tool Cannot Find Play-Services-Tasks.Aar? Why

Dynamic Form with Repeating Form

Settext Fails to Show a Number as Text in a Textview

How to Rotate the Android Emulator Display

How to Make Gradient Background in Android

Execution Failed for Task 'App:Mergedebugresources' Crunching Cruncher....Png Failed

Trigger Mediascanner on Specific Path (Folder), How To

Bluetooth Low Energy Startscan on Android 6.0 Does Not Find Devices

Passing String Array Between Android Activities

Android: How to Pass Parcelable Object to Intent and Use Getparcelable Method of Bundle

Android Emulator Spams Logcat with "Service Com.Android.Exchange.Exchangeservice Has Leaked Serviceconnection ... That Was Originally Bound Here

Android Viewpager with Bottom Dots

How to Use the Firebase Server Timestamp to Generate Date Created


Leave a reply



Submit