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

Question

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?

Answer 1

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>     

Answer 2

You can also apply a rotation to your ProgressBar in layout XML. In your case -90° would solve your problem.

    <ProgressBar         android:id="@+id/progressDemo"         style="?android:attr/progressBarStyleHorizontal"         android:layout_width="152dp"         android:layout_height="152dp"         android:layout_centerInParent="true"         android:indeterminate="false"         android:progress="10"         android:rotation="-90"         android:progressDrawable="@drawable/circular_progress_bar" />