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

android, android-custom-view, android-progressbar

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>

Problem

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 I want the progress to start from the top as shown in the following image 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?

Original source