Simple Circular ProgressView Animation

When it comes to UI and loading data, there is always a requirement to fetch the data we want to load in the UI. It is either from fetching from remote, or local database. And as we all know, fetching data adds latency more often than not, leaves us with a blank screen until the data is ready.

The challenge now is to actually keep the user engaged and provide some context while the data is loading. Most of the times, our first go-to way of indicating thatthe app is doing something is to throw aProgressView with a default timeout of15 seconds or so. In most cases this does the job but this shouldn't always be our go-to way. While there are several ways and recommendations of handling this with more contextual loading screens,placeholders or Facebook'sShimmerLayout , one simple way of adding some context to the progress is to display a ProgressView thatactually shows progress, rather than acontinuously spinning for 15 seconds.

Let me introduce a simple way that I implemented. This approach is to display ananimated circular progress view.

It has following pieces:

• Vector drawable for the circle
• Animated-vector drawable for the animation
• Animation trigger
• Actual Animation

Vector drawable for the circle

<?xml version="1.0" encoding="utf-8"?><vectorxmlns:android="http://schemas.android.com/apk/res/android"android:width="28dp"android:height="28dp"android:viewportWidth="28"android:viewportHeight="28"><pathandroid:name="circle"android:pathData="M14,1.5C7.1,1.5 1.5,7.1 1.5,14C1.5,20.9 7.1,26.5 14,26.5C20.9,26.5   26.5,20.9 26.5,14C26.5,7.1 20.9,1.5 14,1.5Z"android:strokeWidth="3"android:fillColor="#00000000"android:strokeColor="#88D445"android:fillType="evenOdd"/></vector>

Animated-vector drawable for the animation

<?xml version="1.0" encoding="utf-8"?><animated-vectorxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:drawable="@drawable/circle"tools:targetApi="21"><targetandroid:name="circle"android:animation="@animator/circle_animation"/></animated-vector>

Animation trigger

From ViewModel

valanimationStart=MutableLiveData<Int>()

From Fragment

privatefunobserveAnimationStart(){viewModel.animationStart.observe{activity?.let{act->valdrawableCircle:AnimatedVectorDrawableCompat?=AnimatedVectorDrawableCompat.create(actasContext,R.drawable.animated_circle)animateProgressView(drawableCircle)}}}

Actual Animation

privatefunanimateProgressView(drawable:AnimatedVectorDrawableCompat){binding.animationImageView.background=drawablevalanimatable:Animatable2Compat=drawableanimatable.registerAnimationCallback(object:Animatable2Compat.AnimationCallback(){overridefunonAnimationEnd(drawable:Drawable?){binding.animationImageView.background=null}})animatable.start()}

This implementation was done for a simpleMVVM architecture. TheViewModel sould expose the ProgressViewshow/hide state via.LiveData orSingleLiveEvent which isobserved by the correspondingFragment. Now, this fragment is responsile for starting and ending the animation, or when the aimation is done, just assignnull for the drawable.

Please refer to the above code sample to get more information on the implementation. Also, please feel free to add comments if you have come across better ways of implementing this.

Note: Due to backward campatibility, I am usingAminatedVectorDrawableCompat andAnimatable2Compat for drawable. Also, there is no timing. It is simply drawing the path. So, this wouldn't be ideal for long running progress view.