Home » Android » xml – move my progressbar with an image android

xml – move my progressbar with an image android

Posted by: admin June 15, 2020 Leave a comment

Questions:

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

enter image description here

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

enter image description here

please help me

thanks in advance

How to&Answers:

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:

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

enter image description here

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