Matthias Matthias - 3 months ago 42
Android Question

Android: animate circular progress drawable

I need a drawable that looks like the rotating progress circle. That drawable I want to use for instance in an ImageView inside a GridView etc.

So, according to other posts I took the progress_medium_holo.xml from the folder \sdk\platforms\android-xx\data\res\drawable which looks like this. And I also copied the PNG files which are used by this drawable.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate
android:drawable="@drawable/spinner_48_outer_holo"
android:pivotX="50%"
android:pivotY="50%"
android:fromDegrees="0"
android:toDegrees="1080" />
</item>
<item>
<rotate
android:drawable="@drawable/spinner_48_inner_holo"
android:pivotX="50%"
android:pivotY="50%"
android:fromDegrees="720"
android:toDegrees="0" />
</item>
</layer-list>


Within my layout I then used for instance this ImageView which is used the progress-drawable.

<ImageView
android:id="@+id/element_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:src="@drawable/progress_medium_holo" />


static progress circle

But the result is a static circle-progress. Is there a way to animate that one by XML definition and using no code?

Answer

There is a View named ProgressBar that does exaclty what you want. Just use this instead of your ImageView:

<ProgressBar
    android:id="@+id/element_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:paddingBottom="5dp"
    android:paddingTop="5dp" />