Skip to content
[AndroidLib] A nicer, redesigned and vertical SeekBar for Android πŸŽ›
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.


Type Name Latest commit message Commit time
Failed to load latest commit information.
gradle/wrapper NEW BUILD: Gradle upgrade + bugfix Aug 22, 2019
press Updating press Aug 16, 2019
verticalseekbar-example Some example project's changes Aug 27, 2019
verticalseekbar Changing deprecated line Aug 22, 2019
.gitignore First commit Jun 24, 2019
LICENSE First commit Jun 24, 2019 Updating README Sep 11, 2019
build.gradle NEW BUILD: Gradle upgrade + bugfix Aug 22, 2019
dependencies.gradle NEW BUILD: Gradle upgrade + bugfix Aug 22, 2019 First commit Jun 24, 2019
gradlew Unix-version of gradlew Jun 26, 2019
gradlew.bat First commit Jun 24, 2019
settings.gradle First commit Jun 24, 2019


License Platform API

Android Weekly Download



This is the source code of an Android library: -=:[ VerticalSeekBar ]:=-

πŸ“ƒ Check also the Medium article about it!

Why would you need it?

"Reinventing the wheel is, most of the time, a bad idea."
If you've ever tried to make a vertical SeekBar work properly, you know this is not the case. 😏
From the moment you apply that android:rotation="270" all start to get messy: you cannot set the proper height for the drawable; the width of the bar distorts the width of your drawable; even customizing your interaction with the bar is kind of tricky.
I've been through all of this and suddenly I've had enough.

Introducing a nicer, redesigned and highly customizable VerticalSeekBar.

What you got:

  • custom progress drawable: apply resources or color gradients
  • custom thumb: chose your size, background color, corner radius or even to completely hide it
  • view width and drawable width completely separated
  • choose how to set your progress (just sliding the thumb, clicking around, or both)
  • min and max placeholders
  • much more!

How to use it?

Make sure to include the library in your app's build.gradle:

    implementation 'com.lukelorusso:verticalseekbar:1.2.0'

Add the view to your layout:


maybe add some attributes... here you got some, we'll discuss them later


All of them can be also set programmatically.

(Please note: it's strongly recommended to avoid pre-1.2.0 versions due to inconsistencies compared to this guide)


Background and Progress

To set your progress value programmatically:

mainVerticalSeekBar.progress = 75

Do you need a smaller or bigger range? You can change maxValue like this:

mainVerticalSeekBar.maxValue = 70 // "progress" will be automagically reduced!

Let's put some color on this view, shall we?
You can set a drawable for the background and a drawable for the progress. If you don't, default colors will be applied.

For both background and progress you have 3 choices:

  • set a start color and an end color, the view will create a gradient for you
  • set a drawable resource or color (REMEMBER: this choice has priority on the one before)
  • just don't choose (it's still a choice anyway πŸ˜‰)

Example for the first choice: apply a gradient

mainVerticalSeekBar.barBackgroundStartColor = ContextCompat.getColor(this, R.color.my_background_start_color)
mainVerticalSeekBar.barBackgroundEndColor = ContextCompat.getColor(this, R.color.my_background_end_color)
mainVerticalSeekBar.barProgressStartColor = ContextCompat.getColor(this, R.color.my_progress_start_color)
mainVerticalSeekBar.barProgressEndColor = ContextCompat.getColor(this, R.color.my_progress_end_color)

Example for the second choice: apply a resource (will eventually override the first one)

mainVerticalSeekBar.barBackgroundDrawable = getDrawable(R.color.my_background_color)
mainVerticalSeekBar.barProgressDrawable = getDrawable(R.drawable.my_progress)

Your bar can also have rounded corners...

mainVerticalSeekBar.barCornerRadius = 40 // those are pixels

...and a proper independent width

mainVerticalSeekBar.barWidth = 30 // those are pixels


To set minimum and/or maximum placeholders (null is a possible value to remove them):

mainVerticalSeekBar.minPlaceholderDrawable = getDrawable(R.drawable.my_min_placeholder)
mainVerticalSeekBar.maxPlaceholderDrawable = getDrawable(R.drawable.my_max_placeholder)

Since v1.1.4 you can also choose placeholders' position
You can choose between {"inside", "outside", "middle"} ("middle" by default)
Programmatically, it will be:

mainVerticalSeekBar.minPlaceholderPosition = VerticalSeekBar.Placeholder.INSIDE
mainVerticalSeekBar.maxPlaceholderPosition = VerticalSeekBar.Placeholder.OUTSIDE

Now about the thumb placeholder πŸ‘†
It is child of a androidx.cardview.widget.CardView. You can choose the color tint and the corner radius of the CardView:

mainVerticalSeekBar.thumbContainerColor = ContextCompat.getColor(this, R.color.my_thumb_background_color)
mainVerticalSeekBar.thumbContainerCornerRadius = 15 // those are pixels

You can set your thumb drawable like this:

mainVerticalSeekBar.thumbPlaceholderDrawable = getDrawable(R.drawable.my_thumb_placeholder)

If you just don't want to see it:

mainVerticalSeekBar.showThumb = false


You can interact with your VerticalSeekBar in two ways:

  • sliding the thumb
  • tapping on the bar

Both those interactions can be disabled if you like (they are true by default).
For instance, It can be useful to disable sliding in case you need to put the VerticalSeekBar on a ScrollView.
To do so:

mainVerticalSeekBar.useThumbToSetProgress = false
mainVerticalSeekBar.clickToSetProgress = true

Try to change those booleans too see other possibilities!

Still want more?

If this level of customization is not enough, I have one last good news for you: the seekbar layout is ENTIRELY CUSTOMIZABLE!

You can pick the original layout_verticalseekbar.xml and put it in your project's res/layout folder.

Now you can modify it as you wish; just remember to keep all the original ids! πŸ˜‰ (thumbCardView and thumbPlaceholder can be safely removed)


Feel free to checkout and launch the example app 🎑

Also, see where using this library has been the perfect choice:



Make with πŸ’š by Luca Lorusso, licensed under Apache License 2.0
Thanks for the help to Lopez Mikhael

You can’t perform that action at this time.