move my progressbar with an image android

Question

i have this code

is a progress bar that fill with a red color

<?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="#c3c3c3"
                android:centerColor="#c3c3c3"
                android:centerY="0.75"
                android:endColor="#7f7f7f"
                android:angle="270"/>
            <padding android:left="1dp"
            android:top="1dp"
            android:right="1dp"
            android:bottom="1dp"/> 
        <corners android:radius="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="270"/>
            <padding android:left="1dp"
                android:top="1dp"
                android:right="1dp"
                android:bottom="1dp"/> 
            <corners android:radius="10dp"/> 
            </shape>
    </clip>
</item>

<item android:id="@android:id/progress">
    <clip>
       <shape>
            <gradient
                android:startColor="#a42c48"
                android:centerColor="#a42c48"
                android:centerY="0.75"
                android:endColor="#eb3e67"
                android:angle="270"/>
            <padding android:left="1dp"
                android:top="1dp"
                android:right="1dp"
                android:bottom="1dp"/> 
            <corners android:radius="10dp"/> 
        </shape>
    </clip>
    </item>
</layer-list>

and look like this

now i want to add an image to move at the same time the progress bar fills up like the image below

please help me

thanks in advance

Answer 1

Maybe you could style a seekbar (instead of a progressbar) using your layerlist and add your image as the thumb scrubber?

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

Answer 2

I think this moving image can be done using seekbar, this image is called thum drawable

You can try this tutorial it will help you a lot!!

set the seekbar attribute android:thumb="@drawable/seek_thumb" to point to the drawable that you desire