Animate Android Ring Shape's sweep angle

Leon Storey picture Leon Storey · Jun 9, 2013 · Viewed 7.4k times · Source

Attempting to animate the Android Ring Shape to produce an effect similiar to the shown sequence of images.

Intended Animation

I have found the Shape Drawable type of Ring.

<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadius="75dp"
android:thickness="25dp"
android:useLevel="false">

Along with the ArcShape(startAngle, sweepAngle) method.

ShapeDrawable shape = new ShapeDrawable(new ArcShape(0, 360));     
shape.setIntrinsicHeight(100);
shape.setIntrinsicWidth(100);
shape.getPaint().setColor(Color.BLACK);

However, the problems arise from being unable to find the drawable shape's sweep angle property or the ability to create an inner radius for ArcShape.

I am attempting to produce a smooth animation.

Answer

D-C0d3r picture D-C0d3r · Nov 5, 2014

Old thread but i think it's still useful.

I managed to get a similar behaviour using the above code:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <size
                android:height="56dp"
                android:width="56dp"/>
            <stroke
                android:width="6dp"
                android:color="#FFFFFF"/>
        </shape>
    </item>
    <item>
        <shape android:shape="oval">
            <size
                android:height="50dp"
                android:width="50dp"/>
            <stroke
                android:width="6dp"
                android:dashGap="140dp"
                android:dashWidth="16dp"
                android:color="#FF0000"/>
        </shape>
    </item>
</layer-list>

The key here is to play with the dashGap and dashWidth values until you get the desired image.