Search code examples
androidandroid-custom-viewandroid-progressbar

Android: Start the circular progress bar from top (270°)

I have defined a circular progress bar using the following drawable "ciruclar_progress_bar.xml"

<?xml version="1.0" encoding="utf-8"?>

<item android:id="@android:id/progress">
    <shape
        android:innerRadiusRatio="2.5"
        android:shape="ring"
        android:thicknessRatio="25.0" >
        <gradient
            android:centerColor="@color/gray"
            android:endColor="@color/gray"
            android:startColor="@color/gray"
            android:type="sweep" />
    </shape>
</item>
<item android:id="@android:id/secondaryProgress">
    <shape
        android:innerRadiusRatio="2.5"
        android:shape="ring"
        android:thicknessRatio="25.0" >
        <gradient
            android:centerColor="@color/green"
            android:endColor="@color/green"
            android:startColor="@color/green"
            android:type="sweep" />
    </shape>
</item>

and I have used this drawable for ProgressBar in my layout using the following code

  <ProgressBar
            android:id="@+id/progressWheel"
            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/circular_progress_bar" />

I used following code to show progress on the ProgressBar 

progressWheel.setSecondaryProgress(percent);

(Used secondary progress because the green color should come on top of the black color of the ring.)

This draws the circular ProgressBar whose starting position is on the right (0°) as shown in the following image

enter image description here

I want the progress to start from the top as shown in the following image

enter image description here

I tried putting android:angle="270" in the gradient tag of drawable xml but had no luck. Is there any way I can start the sweep angle from the top?

Solution

  • Try specifying rotation degrees to your progress items.

    <?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:id="@android:id/progress">
        <rotate
            android:fromDegrees="270"
            android:toDegrees="270"
            android:pivotX="50%"
            android:pivotY="50%" >
            <shape
                android:innerRadiusRatio="2.5"
                android:shape="ring"
                android:thicknessRatio="25.0" >
                <gradient
                    android:centerColor="@color/gray"
                    android:endColor="@color/gray"
                    android:startColor="@color/gray"
                    android:type="sweep" />
            </shape>
        </rotate>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <rotate
            android:fromDegrees="270"
            android:toDegrees="270"
            android:pivotX="50%"
            android:pivotY="50%" >
            <shape
                android:innerRadiusRatio="2.5"
                android:shape="ring"
                android:thicknessRatio="25.0" >
                <gradient
                    android:centerColor="@color/green"
                    android:endColor="@color/green"
                    android:startColor="@color/green"
                    android:type="sweep" />
            </shape>
        </rotate>
    </item>
</layer-list>