Dienstag, 12. August 2014

How to create an ProgressCircle instead of a ProgressBar

In the picture you see the result of this little tutorial. A ProgressCircle where the progress is visualized as a circle from 0% to 100%.


First of all you will need a new progress drawable.

<?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:innerRadiusRatio="2.2"
            android:shape="ring"
            android:useLevel="false"
            android:thicknessRatio="90.0">
            <solid android:color="@color/white"/>
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <shape
            android:innerRadiusRatio="2.2"
            android:shape="ring"
            android:thicknessRatio="25.0">
            <solid android:color="@color/attribute_green"/>
        </shape>
    </item>
</layer-list>

Inside of the drawable xml you have the background and the progress of the ProgressBar.
After creating the ProgressDrawable you have to put it as progressDrawable to the ProgressBar Widget as shown below:

<ProgressBar
    android:id="@+id/manufacture_count_progress"
    style="?android:attr/progressBarStyleHorizontal" 
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:rotation="90"
    android:indeterminate="false"
    android:layout_centerInParent="true"
    android:max="100"
    android:progress="10"
    android:progressDrawable="@drawable/progressbar" />

Done! Now you will see a CircleProgressBar. You can use it the exact same way like with the normal drawable. Have Fun.

Keine Kommentare:

Kommentar veröffentlichen