Animate .png image in widget

Question

Problem Description

---

I am writing a simple Widget application for Android, In my Widget I Layout I have ImageViewRefresh control on which I have set Refresh Image Picture (Green Image Below).

Question

---

At some point I press on a ImageViewRefresh button in my Widget and application start to download some content from the Internet, while application downloading data in a background I want to make some animation, like rotate my image (Green Image Below). Can I do that ?

Researches

---

I have read some posts about Image animation, but I can find only animation of .gif pictures in application, is where a way to rotate image for example make some rotated images and change them or something else.

Code Example

Here is a part of code from my layout my image is not rotating. Why ? (my image is simple .png image)

<ProgressBar
        android:id="@+id/progressBarRefresh"
        android:layout_width="36dp"
        android:indeterminateDrawable="@drawable/arrow_refresh"
        android:layout_height="36dp"
        android:layout_alignTop="@+id/imageViewArrowNext"
        android:layout_marginRight="70dp"
        android:layout_toLeftOf="@+id/textViewAutherName"
        android:indeterminate="true" />

Image which I want to rotate.

Answer 1

edit: I'll apologise in advance but I believe my answer might have mislead from the question:

• as tested, the system does not automatic rotates the drawable, but there are styles you can change to do it (I honestly don't remember, it's been 2 years ago on Eclair), but you can try to find it.
• the answer below works (as it was tested) but NOT for custom drawables it won't rotate them.
• for a custom animation drawable refer to here: Custom Drawable for ProgressBar/ProgressDialog
• but as mentioned by one of the comments, app widgets are not supposed to run animations Is there a way to animate on a Home Widget?

---

original post:

Do not try to animate the widget yourself

Use a ProgressBar set it to be indeterminate and use setIndeterminateDrawable(Drawable d); to set the image you want to be rotating. (or just leave the native one that looks very nice too)

edit: here's what the code would look like:

// in your widget update method:
View v = LayoutInflater.from(context).inflate(R.layout.widget, null);
ProgressBar pb = (ProgressBar) v.findViewById(R.id.progressBar1);
pb.setIndeterminateDrawable(R.drawable.widget_processing);

here's what the XML for something like this would look like:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:src="@drawable/ic_launcher" />

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_toRightOf="@+id/imageView1"
    android:text="Medium Text"
    android:textAppearance="?android:attr/textAppearanceMedium" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/imageView1"
    android:layout_alignLeft="@+id/textView1"
    android:text="Small Text"
    android:textAppearance="?android:attr/textAppearanceSmall" />

<ProgressBar
    android:id="@+id/progressBar1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:indeterminate="true" />

</RelativeLayout>

Answer 2

The best way to animate an image in Android is by using the AnimationDrawable system. To do this, you need an xml similar to the one below in one of your drawable folder.

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true">
    <item android:drawable="@drawable/image1" android:duration="200" />
    <item android:drawable="@drawable/image2" android:duration="200" />
    <item android:drawable="@drawable/image3" android:duration="200" />
</animation-list>

Where image1, image2 and image3 are different drawables in your resources, each representing a different state of your image.

To create the images, you can simply open your image with Gimp or Photoshop, and Rotate it a few degrees and export it in a new image, and repeat.

Alternatively, you can use the following code to rotate the ImageView. First create a "anim" folder under your res folder, and add a rotate.xml file with the following content :

<rotate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:interpolator="@android:anim/linear_interpolator"
    android:toDegrees="360"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="1000"
    android:startOffset="0"
/>

then import and start the animation like this :

Animation rotation = AnimationUtils.loadAnimation(this, R.anim.rotation);
rotation.setRepeatCount(Animation.INFINITE);
imageView.startAnimation(rotation);