Rajkiran Rajkiran - 2 months ago 33
Android Question

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 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 show the progress on the progressBar with the following code
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?

Answer

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>