Rotating image. Animated list or animated rotation? (Android)

Question

I want to create a rotating image of progress and wonder how best to move on. I can make it work with an animation list, for example, 12 images that change every 100 ms. This works great, but it’s rather tedious to create 12 images, or for each size and resolution:

<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false"> <item android:drawable="@drawable/ic_loading_grey_on_black_01" android:duration="100" /> <item android:drawable="@drawable/ic_loading_grey_on_black_02" android:duration="100" /> <item android:drawable="@drawable/ic_loading_grey_on_black_03" android:duration="100" /> <item android:drawable="@drawable/ic_loading_grey_on_black_04" android:duration="100" /> <item android:drawable="@drawable/ic_loading_grey_on_black_05" android:duration="100" /> <item android:drawable="@drawable/ic_loading_grey_on_black_06" android:duration="100" /> <item android:drawable="@drawable/ic_loading_grey_on_black_07" android:duration="100" /> <item android:drawable="@drawable/ic_loading_grey_on_black_08" android:duration="100" /> <item android:drawable="@drawable/ic_loading_grey_on_black_09" android:duration="100" /> <item android:drawable="@drawable/ic_loading_grey_on_black_10" android:duration="100" /> <item android:drawable="@drawable/ic_loading_grey_on_black_11" android:duration="100" /> <item android:drawable="@drawable/ic_loading_grey_on_black_12" android:duration="100" /> 

I believe that a simpler solution is to use one image per resolution, but rather rotate it for each frame. In the platform resources (android-sdk-windows / platform ...) I found something called animated-rotate in the drawable / search_spinner.xml file, but if I copy the code, I get a compiler error complaining about android: framesCount and android : frameDuration (Google API API 2.2 in Eclipse):

 <animated-rotate xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/spinner_black_20" android:pivotX="50%" android:pivotY="50%" android:framesCount="12" android:frameDuration="100" /> 

I also tried using repeating rotation animations (using animations in the resource folder), but I really prefer viewing the version of the animation list.

What is the recommended way to solve this problem?

Answer 1

Rotate drawable , proposed by Praveen, will not give you control over the number of frames. Suppose you want to implement a custom loader consisting of 8 sections:

Using the animation-list approach, you need to create 8 frames rotated 45*frameNumber degrees manually. In addition, you can use the 1st frame and set the rotation animation for it:

File res/anim/progress_anim.xml :

 <?xml version="1.0" encoding="utf-8"?> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:fromDegrees="0" android:toDegrees="360" android:pivotX="50%" android:pivotY="50%" android:repeatCount="infinite" /> 

MainActivity.java File

 Animation a = AnimationUtils.loadAnimation(getContext(), R.anim.progress_anim); a.setDuration(1000); imageView.startAnimation(a); 

This will give you smooth animation instead of an 8-speed one. To fix this, we need to implement a custom interpolator:

 a.setInterpolator(new Interpolator() { private final int frameCount = 8; @Override public float getInterpolation(float input) { return (float)Math.floor(input*frameCount)/frameCount; } }); 

You can also create your own widget:

File res/values/attrs.xml :

 <?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="ProgressView"> <attr name="frameCount" format="integer"/> <attr name="duration" format="integer" /> </declare-styleable> </resources> 

File ProgressView.java :

 public class ProgressView extends ImageView { public ProgressView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); setAnimation(attrs); } public ProgressView(Context context, AttributeSet attrs) { super(context, attrs); setAnimation(attrs); } public ProgressView(Context context) { super(context); } private void setAnimation(AttributeSet attrs) { TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.ProgressView); int frameCount = a.getInt(R.styleable.ProgressView_frameCount, 12); int duration = a.getInt(R.styleable.ProgressView_duration, 1000); a.recycle(); setAnimation(frameCount, duration); } public void setAnimation(final int frameCount, final int duration) { Animation a = AnimationUtils.loadAnimation(getContext(), R.anim.progress_anim); a.setDuration(duration); a.setInterpolator(new Interpolator() { @Override public float getInterpolation(float input) { return (float)Math.floor(input*frameCount)/frameCount; } }); startAnimation(a); } } 

Activity_main.xml file:

 <com.example.widget.ProgressView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_progress" app:frameCount="8" app:duration="1000"/> 

res/anim/progress_anim.xml file: listed above

Answer 2

You need to create a flexible XML file as shown below:

the code:

 <animated-rotate xmlns:android="http://schemas.android.com/apk/res/android" android:pivotX="50%" android:pivotY="50%" android:fromDegrees="0" android:toDegrees="360" android:drawable="@drawable/imagefile_to_rotate" /> 

Answer 3

I found vocals to respond, to be the best, to create a nice step / step animation. I went to my last suggestion and made my own widget, the only problem I encountered was that the visibility setting did not work because it was animated and therefore would always be visible ...

I adjusted its code (ProgressView.java, which I renamed StaggeredProgress.java) as follows:

 public class StaggeredProgress extends ImageView { private Animation staggered; public StaggeredProgress(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); setAnimation(attrs); } public StaggeredProgress(Context context, AttributeSet attrs) { super(context, attrs); setAnimation(attrs); } public StaggeredProgress(Context context) { super(context); } private void setAnimation(AttributeSet attrs) { TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.StaggeredProgress); int frameCount = a.getInt(R.styleable.StaggeredProgress_frameCount, 12); int duration = a.getInt(R.styleable.StaggeredProgress_duration, 1000); a.recycle(); setAnimation(frameCount, duration); } public void setAnimation(final int frameCount, final int duration) { Animation a = AnimationUtils.loadAnimation(getContext(), R.anim.progress_anim); a.setDuration(duration); a.setInterpolator(new Interpolator() { @Override public float getInterpolation(float input) { return (float)Math.floor(input*frameCount)/frameCount; } }); staggered = a; //startAnimation(a); } @Override public void setVisibility(int visibility) { super.setVisibility(visibility); if( visibility == View.VISIBLE ) startAnimation(staggered); else clearAnimation(); } } 

This way of adjusting the visibility of visibility starts and stops the animation as necessary ... Many thanks again to vocals!

Answer 4

see examples here http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/view/index.html

namely: the progress bar

• Incremental Demonstrates large and small rotary progress indicators that can increase or decrease in units.
• Smooth Demonstrates large and small continuously rotating progress indicators used to indicate a common “busy” message.
• Dialogs Demonstrates a ProgressDialog dialog box that displays a progress bar. This example demonstrates both definite and vague indicators of progress.
• In the title bar Demonstrates an activity screen with a progress bar loaded by setting the progress indicator of the WindowPolicy indicator.

Answer 5

SACPK solution definitely works. Another solution might be to use <animated-rotate> exactly the same as in the question, and remove the android:framesCount="12" android:frameDuration="100" attributes for those that the compiler complains about. It still works even for my 8-frame image.

However, I did not understand how to control the animation speed: (.