Animated Icon for ActionItem

You’re on the right track. Here is how the GitHub Gaug.es app will be implementing it.

First they define an animation XML:

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

Now define a layout for the action view:

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="https://stackoverflow.com/questions/9731602/@drawable/ic_action_refresh"
    style="@style/Widget.Sherlock.ActionButton" />

All we need to do is enable this view whenever the item is clicked:

 public void refresh() {
     /* Attach a rotating ImageView to the refresh item as an ActionView */
     LayoutInflater inflater = (LayoutInflater) getActivity().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
     ImageView iv = (ImageView) inflater.inflate(R.layout.refresh_action_view, null);

     Animation rotation = AnimationUtils.loadAnimation(getActivity(), R.anim.clockwise_refresh);
     rotation.setRepeatCount(Animation.INFINITE);
     iv.startAnimation(rotation);

     refreshItem.setActionView(iv);

     //TODO trigger loading
 }

When the loading is done, simply stop the animation and clear the view:

public void completeRefresh() {
    refreshItem.getActionView().clearAnimation();
    refreshItem.setActionView(null);
}

And you’re done!

Some additional things to do:

  • Cache the action view layout inflation and animation inflation. They are slow so you only want to do them once.
  • Add null checks in completeRefresh()

Here’s the pull request on the app: https://github.com/github/gauges-android/pull/13/files

Leave a Comment