Configuring SeekBar - How to properly position a custom "large" image?

Question

I set up my SeekBar - I use a custom image as a background and a custom image as a thumb ( How do I create a custom layout for search in Android? And How to customize the look of SeekBar on Android? ).

The idea is to make the SeekBar look like the ones in this image:

I want the thumb image to fit perfectly in the rounded strip when the progress value is set to 0 or 100 (out of 100).

To correctly position the thumb (i.e., not overlap the ends of the bar), I set the paddingLeft and paddingRight to exactly half the width of the thumb ( Android: Seekbar does not scroll all the way to the 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 has a different effect:

---

After further research (and having tried this with the completely default SeekBar , I found that the position of the thumb changed from 2.1 to 2.2. My hack of paddingLeft and paddingRight not a problem.

• In 2.1, the thumb is centered around the end of the rack, with half the thumb on the bar and half on it.
• In 2.2, the thumb is located inside the shaft without any coincidence. Hence the strange way that fill values ​​affect the result. This is what I tried to achieve, but when using a custom thumb, this effect no longer works the same.

---

I think I need to create my own java class to handle this type of thing. In this question ( Can I make rounded corners in a custom Progressbar progressDrawable? ), The developer uses ClipDrawable to make a normal progress bar.

What type of accessible object would I use, and how to correctly position my finger?

Answer 1

The behavior of the thumbOffset parameter has changed between the two versions. ThumbOffset determines the actual thumb image offset compared to the provided position parameter.

Answer 2

 seekbar.setThumbOffset(0); 

At runtime. Not from XML!

Solved problem for me.

Answer 3

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 tried this and it worked perfectly with 2.1 and 2.2.

In your case, try setting maxWidth, max and progress, as I did, and try removing the paddings. This can help you solve the problem.

Answer 4

finally found the answer, in this case you should use android:thumbOffset , but android:thumbOffset NOT an installer for the thumb along with the progress bar, but it's the thumb length from , starting from to , so that the seekbar center point can adjust the center point of the thumb in starting point. So, if we have a thumb image with a width of 50 , the thumbOffset parameter should be 25 (50/2), so the seekbar adjust the “strong” value to zero at pixel 25 of the thumb, which causes the thumb to be exactly in the middle.