Question

I use the below code to generate the circular progress. But I don’t know how to change the pattern and color of it.

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:pivotX="10%" android:pivotY="10%" android:fromDegrees="0"
    android:toDegrees="360">
    <shape android:shape="ring" android:innerRadiusRatio="0"
        android:thicknessRatio="6" android:useLevel="false">

        <size android:width="10dip" android:height="10dip" />
        <gradient android:type="linear" android:useLevel="false"
            android:startColor="#000000" 
            android:endColor="#000000"
            android:angle="0"
             />
    </shape>
</rotate>

It generated the circular progress like below:

But I need to change the color and pattern like below:

I don’t want to implement the music icon. I just want the progress pattern and the color to look like the second image.

Answer 1

You need to use the AnimationDrawable class for your requirement,

create spin_animation.xml file in res/drawable/ folder:

<!-- Animation frames are wheel0.png -- wheel5.png files inside the
 res/drawable/ folder -->
 <animation-list android:id="@+id/selected" android:oneshot="false">
    <item android:drawable="@drawable/wheel0" android:duration="50" />
    <item android:drawable="@drawable/wheel1" android:duration="50" />
    <item android:drawable="@drawable/wheel2" android:duration="50" />
    <item android:drawable="@drawable/wheel3" android:duration="50" />
    <item android:drawable="@drawable/wheel4" android:duration="50" />
    <item android:drawable="@drawable/wheel5" android:duration="50" />
 </animation-list>

Use following code to execute,

 // Load the ImageView that will host the animation and
 // set its background to our AnimationDrawable XML resource.
 ImageView img = (ImageView)findViewById(R.id.spinning_wheel_image);
 img.setBackgroundResource(R.drawable.spin_animation);

 // Get the background, which has been compiled to an AnimationDrawable object.
 AnimationDrawable frameAnimation = (AnimationDrawable) img.getBackground();

 // Start the animation (looped playback by default).
 frameAnimation.start();