CODEWITHSUNDEEP
androidprogress-barandroid-custom-drawable
Eggakin Baconwalker
Eggakin Baconwalker

Reputation: 583

Android - How to put round corner on the running progress in a progress bar using custom xml drawable as background

I'm using a custom drawable for my progress bar:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="15dp" />
            <solid android:color="@color/light_grey" />
        </shape>
    </item>

    <item android:id="@android:id/progress" >
        <clip>
            <shape>
                <corners android:radius="15dp" />
                <solid android:color="@color/indigo" />                
            </shape>
        </clip>
    </item>
</layer-list>

and it looks like:

enter image description here

Now, the background appears with a round corner, but the progress (inside) is straight, and I want to make it round too, like this:

enter image description here

I googled but didn't find any solution.

Any ideas on how can I achieve this round corner on progress?

Thanks!

Upvotes: 2

Views: 3562

Answers (3)

iDeveloper
iDeveloper

Reputation: 1725

you can see example of view here

you can modify the color and size of the thumb and seekbar to do what you want.

This solution was the only way i could do this. Hope this help

this is my seekbar :

         <SeekBar
            android:id="@+id/simpleProgressBar"
            android:layout_width="fill_parent"
            android:layout_height="12dp"
            android:max="100"
            android:progress="0"
            android:background="@null"
            android:shape="oval"
            android:splitTrack="false"
            android:progressDrawable="@drawable/progress_background"
            android:secondaryProgress="0"
            android:thumbOffset="10dp"
            android:thumb="@drawable/oval_seekbar_thumb" />

this is (progress_background.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 android:shape="rectangle">
            <corners android:radius="5dp" />

            <gradient
                android:angle="270"
                android:endColor="@color/grey_line"
                android:startColor="@color/grey_line" />
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
           <shape android:shape="oval">
               <corners android:radius="5dp" />
               <gradient
                   android:angle="270"
                   android:endColor="@color/blue"
                   android:startColor="@color/blue" />
           </shape>
       </clip>
   </item>
   <item android:id="@android:id/progress">
       <clip>
           <shape android:shape="rectangle">
               <corners android:radius="90dp" />

               <gradient
                   android:angle="90"
                   android:endColor="@color/colorPrimaryDark"
                   android:startColor="@color/colorPrimary" />
            </shape>
       </clip>
   </item>

and this is the thumb (oval_seekbar_thumb.xml) :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="#ffffff" />
            <stroke android:color="@color/colorPrimaryDark" android:width="3dp"/>
            <size android:height="12dp" android:width="12dp"/>
        </shape>
    </item>
</selector>

The height of the thumb should be same as the height of the seekbar to look properly.

Upvotes: 2

andinrajesh
andinrajesh

Reputation: 575

Replace the <clip> tag with <scale android:scaleWidth="100%">. This should give the curved edges to secondary progress

Upvotes: 0

Yurii
Yurii

Reputation: 685

I know maybe it is obsolete question,but, just remove <clip> tag.

Upvotes: -3

Related Questions