title: SeekBar customization - how to properly position custom "thumb" image?
body: <p>I have customised my SeekBar - I use a custom image as the background, and a custom image as the thumb (<a href="https://stackoverflow.com/questions/7227559/how-to-create-custom-layout-for-seekbar-in-android">How to create custom layout for seekbar in android?</a> &amp; <a href="https://stackoverflow.com/questions/3187154/how-to-customize-the-look-of-a-seekbar-in-android">How to customize the look of a SeekBar in Android?</a>).</p>
  
  <p>The idea is to make a SeekBar that looks like the ones in this image:</p>
  
  <p><img src="https://i.stack.imgur.com/HWAPW.png" alt="enter image description here"></p>
  
  <p>I wish to have the thumb image fit perfectly into the rounded bar when the <code>progress</code> value is set at 0 or 100 (out of 100).</p>
  
  <p>In order to position the thumb correctly (i.e. not overlap the ends of the bar) I have set the  <code>paddingLeft</code> &amp; <code>paddingRight</code> values to exactly half the width of the thumb width (<a href="https://stackoverflow.com/questions/5653750/android-seekbar-doesnt-scroll-all-the-way-to-end/7727123#7727123">Android: Seekbar doesn&#39;t scroll all the way to end</a>).</p>
  
  <p>.../res/layout/main.xml:</p>
  
  <pre><code>&lt;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" &lt;!-- this is an image --&gt;
      android:background="@drawable/hos_bar" &lt;!-- this is an image --&gt;
      android:paddingLeft="24dp"
      android:paddingRight="24dp"&gt;
  &lt;/SeekBar&gt;
  </code></pre>
  
  <p>This works in Android 2.1.</p>
  
  <hr>
  
  <p>In Android 2.2 this produces a different effect:</p>
  
  <p><img src="https://i.stack.imgur.com/9RTTF.png" alt="enter image description here"></p>
  
  <hr>
  
  <p>After further investigation (and trying this with a totally default <code>SeekBar</code> I have found that the position of the thumb image has changed from 2.1 to 2.2. My hack of changing the <code>paddingLeft</code> &amp; <code>paddingRight</code> is not the issue.</p>
  
  <ul>
  <li>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. </li>
  <li>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.</li>
  </ul>
  
  <hr>
  
  <p>I think I need to make a custom java class to handle this type of thing. In this question (<a href="https://stackoverflow.com/questions/5669655/possible-to-do-rounded-corners-in-custom-progressbar-progressdrawable">Possible to do rounded corners in custom Progressbar progressDrawable?</a>), the developer uses a <code>ClipDrawable</code> in order to make a normal progress bar. </p>
  
  <p>What type of drawable object would I use, and how, in order to correctly position my thumb?</p>