Create animated refresh button in Android

In Android, we can have drawings on a button, also we can put animated drawings on a button as well. Today we will show how to create an animated refresh button with an animated spinner on it.

We need to create an animated drawing first. Here we name it as progress.xml and put it in the res/drawable folder:

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/spin_refresh" android:oneshot="false">
    <item android:drawable="@drawable/ic_action_refresh1" android:duration="400" />
    <item android:drawable="@drawable/ic_action_refresh2" android:duration="400" />
    <item android:drawable="@drawable/ic_action_refresh1" android:duration="400" />
    <item android:drawable="@drawable/ic_action_refresh2" android:duration="400" />
 </animation-list>

Here ic_action_refresh1 and ic_action_refresh2 are two spinner pictures in the same folder as the progress.xml file.

You can find the two refresh images here :
 

Next in the layout xml file, we can create a button component by putting following codes:

    <Button android:id="@+id/detail_refresh_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="@string/refresh"
        android:gravity="center"
        android:drawableLeft="@drawable/progress"
    />

Then what you need to do is in your Activity class, you need to have the following codes to get the animated drawable on the button:

Button refreshBtn=(Button)findViewById(R.id.detail_refresh_btn);
refreshBtn.setOnClickListener(detailRefreshClickListener);

AnimationDrawable d=(AnimationDrawable)refreshBtn.getCompoundDrawables()[0];

Here getCompoundDrawables()[0] is mapping to the android:drawableLeft="@drawable/progress" in the layout xml above.      

Finally, when you call

d.start();

You will have the animated drawable animate now.

You can use d.start() and d.stop() to control the start and stop of animation.

Hope this will help those who want to create regresh button with an animated spinner on it.