How can I draw circular progress bar as shown in image below?

Question

Progress bar xml is as:

<ProgressBar
            android:id="@+id/progressBarCircular"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:layout_alignTop="@id/squareView_3"
            android:layout_toRightOf="@id/squareView_3"
            android:layout_marginTop="-105dp"
            android:layout_marginLeft="40dp"
            android:indeterminate="false"
            android:max="100"
            android:progress="0"
            android:background="@color/BlackText"
            android:progressDrawable="@drawable/circular_progressbar" />

circular_progressbar.xml is as:

<?xml version="1.0" encoding="UTF-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:id="@+id/background">
    <shape
            android:innerRadiusRatio="3"
            android:shape="ring"
            android:thicknessRatio="8.0">
        <solid android:color="@color/DarkGrey" />
    </shape>
  </item>
  <item android:id="@+id/progress">
    <shape
            android:innerRadiusRatio="2.5"
            android:shape="ring"
            android:thicknessRatio="12.0">
        <solid android:color="@color/green" />
    </shape>
  </item>
</layer-list>

and for setting progress:

ProgressBar pb = (ProgressBar)view.FindViewById(Resource.Id.progressBarCircular);
pb.Progress = 75;

This is not giving me progress bar as shown below, How can I draw progress bar as below image:

Any help will be heartly appreciated. Thankyou, Happy Coding.

Nigam Patro · Accepted Answer · 2019-02-12T06:25:56.583

1

Try this solution, I think you will get your desired output

<?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:angle="0"
            android:shape="ring"
            android:thickness="10dp"
            android:useLevel="false">
            <solid android:color="#eeeeee" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <rotate
            android:fromDegrees="270"
            android:toDegrees="270">
            <shape
                android:angle="0"
                android:shape="ring"
                android:thickness="10dp"
                android:useLevel="true">
                <solid android:color="#81ca33" />
            </shape>
        </rotate>
    </item>
</layer-list>

And for the rotation, I adjusted attributes in ProgressBar view as:-

<ProgressBar
    android:id="@+id/progressBarView"
    android:layout_width="200dp"
    android:layout_height="200dp"
    style="?android:attr/progressBarStyleHorizontal"
    android:indeterminateOnly="false"
    android:rotation="-90"
    android:max="100"
    android:progressDrawable="@drawable/circular_progressbar" />

edited Feb 12 '19 at 06:25

answered Dec 07 '16 at 12:02

Nigam Patro

2,760
1
18
33

that is the default way you are doing to set progress for progressbar. I think there is nothing from the drawable itself. – Nigam Patro Dec 07 '16 at 12:08
Thankyou @Nigam Patro. Your answer is wright but it didn't give progress(green ring) as shown in figure, need to adjust from and to degrees. The update section in your answer gave the exact look, like in picture. @ Nishant Verma initially you can set the progress in xml but for real time progress you need to set "progress" property of ProgressBar programmatically. Thankyou, Happy Coding. – codemilan Dec 08 '16 at 06:51
What does the first layer-list xml code represent ? @NigamPatro is that part of the (circular_progressbar.axml) – Alyosha_Karamazov Jan 30 '19 at 00:47
@Alyosha_Karamazov I have updated the answer. Please check it. – Nigam Patro Feb 12 '19 at 06:26

How can I draw circular progress bar as shown in image below?

1 Answers1