SeekBar customization - how to properly position custom "thumb" image?

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

seekbar.setThumbOffset(0);

At run-time. Not from XML!

Solved problem for me.

Answer 2

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.

Answer 3

finally found the answer, the case here is that you must use android:thumbOffset, but android:thumbOffset is NOT a setter for the thumb place along with the progress bar, but, it's the thumb length from it's beginning to it's center point so that the seekbar can adjust the thumb's center point at it's beginning point. So, if we have a thumb image with a width of 50, the thumbOffset has to be 25 (50/2), so that the seekbar will adjust the zero value at the pixel 25 of the thumb which will make the thumb appears to be exactly at the middle.

Answer 4

Try using this:

<SeekBar android:id="@+id/seek"
         android:layout_width="fill_parent"
        android:layout_height="73dip"
        android:max="80"
        android:progress="12"
        android:maxWidth="273dip"
        android:maxHeight="73dip"
        android:secondaryProgress="255"   
        android:background="@drawable/image2"       <!-- this is an image -->  
        android:progressDrawable="@drawable/image1" <!-- this is an image -->
        android:thumb="@drawable/lock_thumb"                             
        />

I have tried this and it was working perfectly with 2.1 and 2.2.

In your case,try adjusting maxWidth,max and progress like i did and try removing paddings. It might help you in solving the problem.