android - cant put thumb on center of a seek bar

Question

I want to know how to set thumb at center of a seekbar. Don't know how to express, so i'll add link of a pic. first img is a seekbar from design guides, and the belows are my seekbars.

(ignore about corners. I fixed after capturing the imgs.) at first, from designer, i got two separate img of those text, good and bad. so i combined those. i thought it would work as thumb. but now what i got is these result... please help me.. thank you!

drawable : progressbar_goodbad xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
    <shape>
        <gradient
            android:startColor="#f5c0bd"
            android:centerColor="#f5c0bd"
            android:centerY="0.75"
            android:endColor="#f5c0bd"
            android:angle="270"/>
        <padding android:left="10dp"
            android:top="1dp"
            android:right="10dp"
            android:bottom="1dp"/> 
    <corners
        android:bottomRightRadius="10dp"
        android:bottomLeftRadius="10dp"
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp"/>
</shape>
</item>
<item android:id="@android:id/secondaryProgress">
<clip>
    <shape>
        <gradient
            android:startColor="#234"
            android:centerColor="#234"
            android:centerY="0.75"
            android:endColor="#a24"
            android:angle="90"/>
        <padding android:left="1dp"
            android:top="1dp"
            android:right="1dp"
            android:bottom="1dp"/> 
    <corners
        android:bottomRightRadius="10dp"
        android:bottomLeftRadius="10dp"
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp"/>
        </shape>
</clip>
</item>
<item android:id="@android:id/progress">
<clip>
   <shape>
        <gradient
            android:startColor="#fc9a94"
            android:centerColor="#fc9a94"
            android:centerY="0.75"
            android:endColor="#fc9a94"
            android:angle="90"/>
        <padding android:left="1dp"
            android:top="1dp"
            android:right="1dp"
            android:bottom="1dp"/> 
    <corners
        android:bottomRightRadius="10dp"
        android:bottomLeftRadius="10dp"
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp"/>
    </shape>
</clip>
</item>
</layer-list>

part of main layout xml

<SeekBar
     android:id="@+id/seekBar_fun"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:layout_marginBottom="3dp"
     android:paddingLeft="10dp"
     android:paddingRight="10dp"
     android:max="100"
     android:progress="60"
     android:progressDrawable="@drawable/progressbar_goodbad"
     android:thumb="@drawable/f_02_good_bad_text" />

Answer 1

(Answer found in Twinsens link.)

Your thumb image needs to have it's yellow dot at the center (horizontally); add transparent pixels left or right to make it so. Then, change android:thumbOffset to be exactly half your thumb image size. For example, if your image is 10dp in width, set android:thumbOffset to 5dp.