Spots progress dialog

During development of android application with material desing for my personal purposes, I have implemented some progress dialog with custom progress indicator. I think somebody will like it and want to use in his apps.

So, I decided to extract this dialog into standalone android library and upload it to maven central repository. As always you can find source code at my github and make whatever you want with them.

How it looks like

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

You can install sample application to check how it works by yourself.

Source code available at GitHub page.

Usage

As I mentioned above the library available at maven central repository. Add next dependency into gradle project file:

dependencies {
    compile 'com.github.d-max:spots-dialog:0.7@aar'
}

Javadoc and sources archives are available also. Just use corresponding classifier (read more about classifiers here).

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

AlertDialog dialog = new SpotsDialog(context);
dialog.show();
...
dialog.dismiss();

Note: The library requires 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 several custom attributes added for make dialog able to change such properties:

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

Here are several code snippets which shows how to do that.

Firstly, it's need to declare you own android style resource file.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Custom"
           parent="android:Theme.DeviceDefault.Dialog">
        <item name="DialogTitleAppearance">
            @android:style/TextAppearance.Medium
        </item>
        <item name="DialogTitleText">
            Updating…
        </item>
        <item name="DialogSpotColor">
            @android:color/holo_orange_dark
        </item>
        <item name="DialogSpotCount">
            4
        </item>
    </style>
</resources>

After that just pass style id into constructor.

new SpotsDialog(context, R.style.Custom).show();

And you will see that dialog's appearance.

If you need to change just a dialogs message, you can use constructor with custom message param:

new SpotsDialog(context, "Downloading").show();

Unfortunately, this way of spots color customizing won't work on the pre-lollipop devices (because of this android issue). As workaround you can just override color in the resources.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="spots_dialog_color">
        @color/your_own_color
    </color>
</resources>

Issues

If you use ProGuard tools it can 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

-keep class dmax.dialog.** {
    *;
}

Deep inside

Somebody may be interested how did I implemented such animation. Well, it is not complex, just little 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 behavior, I used these functions:

And the functions plotted like that:

And traditionally, Have a good coding!