2

I want to creat a circular ProgressBar with rounded edge. I have tried CircleProgress library hosted here

https://github.com/lzyzsd/CircleProgress

But the DonutProgress don't have rounded edge which I want. But with my custom progreesDrawable also I am not able to achieve it.

I want to design progress bar as shown below

enter image description here

One corner Rounded as marked in picture.

My custom_progress_bar.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:id="@android:id/progress">
        <rotate
            android:fromDegrees="90"
            android:toDegrees="90"
            android:pivotX="50%"
            android:pivotY="50%" >
            <shape
                android:innerRadiusRatio="2.5"
                android:shape="ring"
                android:thicknessRatio="15.0" >

                <corners
                    android:radius="5dp"
                    android:topRightRadius="5dp"
                    android:topLeftRadius="5dp"
                    />

                <gradient
                    android:centerColor="#8AFF00"
                    android:endColor="#006554"
                    android:startColor="#006554"
                    android:type="sweep" />


            </shape>


        </rotate>
    </item>

</layer-list>

My layout file

<RootLayout...>

<ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="152dp"
        android:layout_height="152dp"
        android:layout_centerInParent="true"
        android:progress="100"

        android:indeterminate="false"
        android:progressDrawable="@drawable/back_progress" />
    <ProgressBar
    android:id="@+id/progressWheel"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="152dp"
    android:layout_height="152dp"
    android:layout_centerInParent="true"
    android:progress="90"

    android:indeterminate="false"
    android:progressDrawable="@drawable/circular_progress_bar" />

    </RootLayout...>

Also I had to use two ProgressBar overlapping each other just to achieve the background thing(grey). I tried defining the background shape too inside my custom_progress_bar.xml but it was not working, so I had to do this. I know its not the solution but I was not able to make it happen by other way.

Can anybody help me to design this progress bar in better way with rounded edge too.

Piyush Agarwal
  • 25,608
  • 8
  • 98
  • 111
  • Your best bet to achieve exact those results is to create your own custom drawable. Use a Path to create the main "arc" around and a normal `drawCircle` to create the rounded edge – Budius Jun 13 '15 at 21:22
  • Thanks @Budius, Can you please give any reference or bit code samples because I don't have much experience of dealing with drawable in Android. – Piyush Agarwal Jun 14 '15 at 08:30
  • @Budius Can you please help ? – Piyush Agarwal Jun 15 '15 at 20:54
  • I guess if you use a .png and rotate it, might get closer, but it won't have the cool effects of the modern progress bars. And no, I won't help. That will take a lot of time and effort to do and properly fine tune. I wish you good luck – Budius Jun 16 '15 at 06:58
  • @Budius give me any reference tutorial which I can follow. – Piyush Agarwal Jun 16 '15 at 07:15
  • @Budius If i want to go both corner rounded will it be easy and could be done by defining corners in xml drawable ? – Piyush Agarwal Jun 16 '15 at 19:42
  • did you find the solution? if yes, please share – Mohmd labeeb Dec 25 '20 at 17:58

1 Answers1

0

I'm a little late to the party, but the code I added in my fork of castorflex's smoothProgressBar can create the progress bar you are describing! the library already had rounded edge progress bar and a friend and I (shout out to Ryan) were able to get the gradient working with it nicely. https://github.com/alex-sanchez-sd/SmoothProgressBar

A.Sanchez.SD
  • 1,950
  • 2
  • 18
  • 23