Question

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:

<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>

<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.

Answer 1

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/