Question

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.

Was it helpful?

Solution 2

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.

OTHER TIPS

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.

You draw a Arc shape Start angle and Sweep angle to diffrent way..you darw diifrent arc in this way ##

See THe Image

ShapeDrawable shapeDrawable=new ShapeDrawable(new ArcShape(220,320));
        shapeDrawable.setIntrinsicHeight(100);
        shapeDrawable.setIntrinsicWidth(100);
        shapeDrawable.getPaint().setColor(Color.RED);
        I1=(ImageView)findViewById(R.id.imageView2);
        I1.setImageDrawable(shapeDrawable);
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top