CODEWITHSUNDEEP
androidandroid-layoutanimationdrawableandroid-drawable
Matthias
Matthias

Reputation: 5764

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?

Upvotes: 4

Views: 10164

Answers (3)

G.T.
G.T.

Reputation: 1557

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" />

Upvotes: 6

CoolMind
CoolMind

Reputation: 28773

Thanks for progress_medium_holo.xml. In my case a standard ProgressBar (for API 23) was not visible, I tryed many variations, only horizontal bar styled progressbars were visible. Then I copied progress_medium_holo.xml and linked drawables from the folder sdk\platforms\android-xx\data\res\drawable and eventually got:

<ProgressBar
    android:id="@+id/progress"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:indeterminateDrawable="@drawable/progress_medium_holo"/>

Upvotes: 0

Ritesh Gune
Ritesh Gune

Reputation: 16729

In order to create a customized progress indicator (rotating progress circle, in your case)

  1. Create a layout file(.xml) or use an image (drawable) for roatating circle. Put it in drawable folder in res.
  2. Use this drawable as a source to the imageview in the layout for loading indicator.
  3. Use this imageview by inflating and call following startLoadingAnimation() on it.Similarly you can stop the animation once your job is done by simply calling stopLoadingAnimation() on it.

You will have to use animation to make it rotate.

// start the loading animation

public void startLoadingAnimation(Context context) {
  Animation rotate = AnimationUtils.loadAnimation(context,
    R.anim.anim_rotate);
  rotate.setRepeatMode(Animation.INFINITE);
  mImgView.startAnimation(rotate);
}

// stop the loading animation
public void stopLoadingAnimation(){
  mImgView.clearAnimation();
}

anim_rotate.xml put this file in anim folder in res

<?xml version="1.0" encoding="utf-8"?>
<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="500"
  android:startOffset="0"
  android:repeatCount="infinite"
/>

Upvotes: 5

Related Questions