Search code examples
androidandroid-layoutanimationdrawableandroid-drawable

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?

Solution

  • There is a View named ProgressBar that does exactly 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" />