android drawable circle with a sweeping arc

Question

I am trying to draw something akin to a progress bar. However, in my case, the progress bar is a circle with a sweeping arc of a different color as shown below (Figure 2 shows a snapshot of the design with some progress indicated by the yellow color). Once the job is complete, the entire circle would become yellow.

enter image description here

To make this I would like to create a circle using xml layout and I am able to do that with following code:

In res/drawable/circle.xml

<solid android:color="@color/red" />

<size
    android:height="200dp"
    android:width="200dp" />

<padding
    android:bottom="10dp"
    android:left="10dp"
    android:right="10dp"
    android:top="10dp" />

In my main layout I just set this as a background to a framelayout...

   <FrameLayout
       android:id="@+id/frameLayout"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:background="@drawable/circle" >

   </FrameLayout>

</LinearLayout>

I know how to draw arcs using the example given at android demo code at http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/graphics/Arcs.html

I am struggling a bit on how to combine these two to create a sweeping motion. I know we have to create a thread and create an onDraw like the one in the demo - but how do I set the sweeping arc center to be at the drawn circle's center? And how would the java code look like (in the activity)? Thanx!

I think you may have to just create a custom view that handles the animation. On the plus side, it shouldn't be too bad. — ahodder, Feb 14 '12 at 22:32
I see, I know how to do that based on the demo. I was hoping I can create an entire layout in xml and then add the "sweeping" arc part in the code. This would be possible if we can place a custom view into a layout defined already. — serverman, Feb 14 '12 at 22:35
You can. Look at http://developer.android.com/guide/topics/ui/custom-components.html#modifying — ahodder, Feb 14 '12 at 22:37
Thanx AedonEtLIRA. I think that is the same as shown in the demo I mentioned earlier. I realized that it is possible to add a view programmatically. But can a view "overlap" the view? If that is the case we can add all the "static" portion (including the circle) and then add a custom view with "sweeping arc" animation that sits on top of the static view created using xml. — serverman, Feb 14 '12 at 22:47
I will look at http://stackoverflow.com/questions/4901408/in-android-how-to-display-one-view-as-overlay-on-top-of-another-view - and see if the solution there plus my comment above can help me out.. — serverman, Feb 14 '12 at 22:49
Just override onDraw(Canvas), draw a red circle, then draw an arc over the circle based on a given load percent. All views can "overlap" other views, but that isn't need here. You can just use onDraw call from view. — ahodder, Feb 14 '12 at 22:51
I would recommend not using XML for the circle, and using the `drawCircle` method. When you create the `RectF` object use basic math to find the center. Make the rect a square. Then you can draw the circle with the radius = to 1/2 of the square's width, then you can draw your arc using the RectF. — Reed, Feb 14 '12 at 23:03

score 3 · Answer 1 · answered Nov 27 '12 at 11:33

3

Instead of creating circle using shape once go through this link.

http://code.google.com/p/afreechart/

I hope it helps you.

answered Nov 27 '12 at 11:33

Shirisha

85
2
9

score 2 · Answer 2 · answered Feb 15 '12 at 22:39

I decided to go with the solution as given in the demo I mentioned earlier. I created a custom view to represent the sweeping arc. I placed it like so in the code (just the relevant code isshown)

    <LinearLayout
       ...>

        <com.example.SweepingArcView
            android:id="@+id/sweepingArc"
            android:layout_width="210dp"
            android:layout_height="210dp"
            android:layout_marginTop="20dp"
            android:layout_weight="1" />

       ...
    </LinearLayout>

Then I draw the sweeping arc as given in the demo code. Thanx for everyone who responded!

android drawable circle with a sweeping arc

2 Answers2