CODEWITHSUNDEEP
androidxmlxamarin.android
codemilan
codemilan

Reputation: 1082

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

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:
enter image description here

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

Upvotes: 1

Views: 1783

Answers (1)

Nigam Patro
Nigam Patro

Reputation: 2770

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" />

Upvotes: 1

Related Questions