Question

I have customised my SeekBar – I use a custom image as the background, and a custom image as the thumb (How to create custom layout for seekbar in android? & How to customize the look of a SeekBar in Android?).

The idea is to make a SeekBar that looks like the ones in this image:

I wish to have the thumb image fit perfectly into the rounded bar when the progress value is set at 0 or 100 (out of 100).

In order to position the thumb correctly (i.e. not overlap the ends of the bar) I have set the paddingLeft & paddingRight values to exactly half the width of the thumb width (Android: Seekbar doesn't scroll all the way to end).

…/res/layout/main.xml:

<SeekBar android:id="@+id/frequency_slider"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    android:max="100" android:progress="0"
    android:progressDrawable="@drawable/seekbar_no_visible_progress"
    android:thumb="@drawable/seekbar_thumb" <!-- this is an image -->
    android:background="@drawable/hos_bar" <!-- this is an image -->
    android:paddingLeft="24dp"
    android:paddingRight="24dp">
</SeekBar>

This works in Android 2.1.

---

In Android 2.2 this produces a different effect:

---

After further investigation (and trying this with a totally default SeekBar I have found that the position of the thumb image has changed from 2.1 to 2.2. My hack of changing the paddingLeft & paddingRight is not the issue.

• In 2.1, the thumb is centred around the end of the bar, with half the thumb on the bar, and half of it off the bar.
• In 2.2, the thumb is positioned within the bar, without any overlap. Hence the strange way the padding values effect the outcome. This is what I was trying to achieve, but when using a custom thumb, this effect no longer works the same way.

---

I think I need to make a custom java class to handle this type of thing. In this question (Possible to do rounded corners in custom Progressbar progressDrawable?), the developer uses a ClipDrawable in order to make a normal progress bar.

What type of drawable object would I use, and how, in order to correctly position my thumb?

Answer 1

The behaviour of thumbOffset parameter has changed between these 2 versions. ThumbOffset determines the actual offset of the thumb image, compared to the position parameter provided.