Rounded Edge in Circular progress Bar Android

Question

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

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.

Answer 1

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