How to customize the look of a SeekBar in Android?

Question

I use a SeekBar in my application and I would like to customize it a little bit. I already figured out how to change the Drawable for the thumb and for the background.

My question is how to change the size of the SeekBar? If I just change the height of the SeekBar like this, theViewis only clipped and it only shows the top piece of theSeekBar`:

<SeekBar
   android:layout_height="10dip"
   style="@style/seekbar_style" />

How do I change the overall size of the Seekbar? I want it to be much thinner then the standard SeekBar.

you can go through this tutorial as well. http://www.mokasocial.com/2011/02/create-a-custom-styled-ui-slider-seekbar-in-android/ — Ali Ashraf, May 11 '12 at 04:32

score 23 · Answer 1 · answered Jul 06 '10 at 15:51

23

You have the equivalent of this of the Progress Bar for the seekbar indeed :

  <style name="Widget.SeekBar">
    <item name="android:indeterminateOnly">false</item>
    <item name="android:progressDrawable">@android:drawable/progress_horizontal</item>
    <item name="android:indeterminateDrawable">@android:drawable/progress_horizontal</item>
    <item name="android:minHeight">20dip</item>
    <item name="android:maxHeight">20dip</item>
    <item name="android:thumb">@android:drawable/seek_thumb</item>
    <item name="android:thumbOffset">8px</item>
    <item name="android:focusable">true</item>
  </style>

So you might want to override all this and do it your way, as you would do it for the title bar, by defining your own style.

answered Jul 06 '10 at 15:51

Sephy

50,022
30
123
131

this works for me & shows how to change the "thumb" image (I just can't figure out what the "thumbOffset" is for) – Richard Le Mesurier Oct 11 '11 at 08:53
1

@RichardLeMesurier thumbOffset is just an invisible 'gap' between the thumb and the edges of the seekbar itself. You set it to stop the thumb from moving too far off the sides. – Glitch Oct 12 '11 at 16:23
how to change the "thumb" image – mohitum Mar 19 '15 at 12:03
@mohitum007 thumb image is changed by he following item: @android:drawable/seek_thumb – abhi Dec 25 '15 at 12:08

score 14 · Accepted Answer · answered Jul 06 '10 at 14:52

I'm not sure about Seekbars, but Progressbars can be customized by using a custom style (defined in your styles.xml) like so:

<style name="MyCustomProgressStyle">
    <item name="android:indeterminateOnly">false</item>
    <item name="android:progressDrawable">@drawable/custom_progress_drawable</item>
    <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>
    <item name="android:minHeight">10dip</item>
    <item name="android:maxHeight">10dip</item>
</style>

Then you can set up a custom drawable based on the android system's progress_horizontal.xml (it's in the frameworks/base/core/res/drawable folder of an AOSP checkout). Here's an example from an open-source project.

How to customize the look of a SeekBar in Android?

2 Answers2

Linked