Search code examples
androidandroid-layoutuser-experience

How can I create a custom loading image that spins?

I'm trying to create a custom loading image. I used this website for create the gif from my svg but the output resolution is very horrible if you don't pay.

I would like to have this effect:

enter image description here

For now I have a custom Progress bar with a rotating image:

<ProgressBar
    android:id="@+id/updateProgressBar"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:drawingCacheQuality="high"
    android:indeterminateBehavior="repeat"
    android:indeterminateDrawable="@drawable/loading"
    android:indeterminateDuration="2000"
    />

loading.xml:

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360"
android:drawable="@drawable/loading_image" >
</rotate>

And this is the result:

enter image description here

Solution

  • User an interpolator on your loading.xml to accelerate the initial animation and decelerate at the end.

    android:interpolator="@android:anim/accelerate_decelerate_interpolator"

    Also you don't need to add a Progressbar for making it rotate. Just call 

    view.startAnimation(AnimationUtils.loadAnimation(activity, R.anim.loading));

    where your view can be almost any view (ImageView, for example).