how to design and code in android like the following

in my app i have scale and progress bar as shown in the following figure

i have separate image for progress bar and marker. my need is how to make the marker to be movable over the progress bar in android. please help me.

my layout xml is:

<Linea开发者_StackOverflow中文版rLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">

<RelativeLayout android:layout_height="wrap_content" android:background="@drawable/scale_bg"
    android:layout_marginLeft="10dp" android:layout_marginRight="10dp"
    android:layout_width="fill_parent" android:id="@+id/relativeLayout1">
</RelativeLayout>

<FrameLayout android:layout_height="wrap_content" android:layout_marginTop="20dp"
    android:layout_marginLeft="10dp" android:layout_marginRight="10dp"
    android:layout_width="fill_parent" android:id="@+id/relativeLayout2">
    <ImageButton android:layout_width="wrap_content"
        android:id="@+id/imageButton1" android:layout_height="wrap_content"
        android:background="@drawable/slider_bg" android:layout_alignParentLeft="true">
    </ImageButton>
    <ImageButton android:layout_width="wrap_content" android:clickable="true"
        android:id="@+id/imageButton1" android:layout_height="wrap_content"
        android:background="@drawable/slider_arrow" android:layout_alignParentLeft="true">
    </ImageButton>
</FrameLayout>

   </LinearLayout>

updated xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">

<RelativeLayout android:layout_height="wrap_content" android:background="@drawable/scale_bg"
    android:layout_marginLeft="10dp" android:layout_marginRight="10dp"
    android:layout_width="fill_parent" android:id="@+id/relativeLayout1">
</RelativeLayout>

<RelativeLayout android:layout_height="wrap_content" android:layout_marginTop="20dp"
    android:layout_marginLeft="10dp" android:layout_marginRight="10dp"
    android:layout_width="fill_parent" android:id="@+id/relativeLayout2">

    <SeekBar android:layout_height="wrap_content" android:id="@+id/seekBar1"
        android:layout_width="match_parent" android:thumb="@drawable/slider_arrow"
        android:progressDrawable="@drawable/slider_bg">
    </SeekBar>


</RelativeLayout>

  </LinearLayout>

slider_bg and slider_arrow are png images.

This is pretty simple to do, I suggest you check out the following blog article which does a very good job describing how to do it: http://www.mokasocial.com/2011/02/create-a-custom-styled-ui-slider-seekbar-in-android/

try

    <SeekBar android:layout_height="wrap_content" android:id="@+id/seekBar1" android:layout_width="match_parent" android:thumb="@drawable/slider_arrow" android:progressDrawable="@drawable/slider_bg"></SeekBar>

It's SeekBar actually, which is equivalent with Slider on Windows controls. You need to customize the background, color and indexer.