Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Animate Android Ring Shape's sweep angle

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.

like image 236
Leon Storey Avatar asked Jun 09 '13 19:06

Leon Storey


2 Answers

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.

like image 106
Amaro Avatar answered Sep 21 '22 00:09

Amaro


Useful material: Android: looking for a drawArc() method with inner & outer radius

Using PorterDuff Clear mode the inner can be "removed", leaving a doughnut shape. You can then use the Arc's sweep angle by redrawing through extending the Animation class.

like image 1
Leon Storey Avatar answered Sep 25 '22 00:09

Leon Storey