Spots progress dialog android library

Maksym Dybarskyi
3 min readMar 10, 2017

--

During development of android application with material design, I’ve implemented some dialog with custom progress indicator. I decided to extract this code to android library and make it available from maven central repository. It’s opensource, so you can find it on my github and do whatever you want with it. In this post I’ll put instructions how to use it and describe some implementation details.

How does it look like

To be honest I saw this progress indicator at some splash screen (don’t remember which software exactly) and decided to implement something similar.

Also there is a demo application available, you can check it out by yourself.

How to use it

As I mentioned this library is available at maven central, so just add dependency to your build.gradle file:

SpotsDialog class is an inheritor of AlertDialog class. You can use it just like simple AlertDialog:

Note: the library requites minimum API level 15

Customize it

I tried to create the dialog highly customizable. For this purpose I used proper android way — styles. The dialog’s default style extends Theme.DeviceDefault.Light.Dialog style. Also there are several custom attributes that allow you to change dialog properties:

  • Title text style
  • Title text value
  • Spots count
  • Spots color

Below is example of using custom styles. Let’s create such Custom style in project’s resource:

And pass it’s id as constructor argument:

The styled dialog should look like that:

Also there are several constructors of SpotsDialog class. So, you can just pass only title for example:

Issues

#1 Unfortunately, on pre-lollipop devices spots color customizing won’t work by using DialogSpotColor attribute in style (because of this android issue). As workaround you can just override color in the resources:

#2 If you are using ProGuard (you probably are), it may shrink some code in the library and color setting won’t work. I have faced with such issue. To prevent this just add few lines into your proguard config file:

Deep inside

Somebody may be interested how did I implemented such animation. Well, no magic, just bit of math :) I created my own Interpolator class — HesitateInterpolator. As you can see at the image below, at the beginning spots’ velocity slows down, then it keeps stable value and accelerating at the end. To archive such behaviour, I used these functions:

And the functions plotted like that:

If you have any suggestions or comments, you are welcome to add comments here or create issue at project’s github page.

--

--