Modifying the resource image of Progress Bar

Question

I want to create a progress bar for Android. I have four images for my square shaped progress bar.

I am using the android defined progress bar:

<ProgressBar
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     style="@android:style/Widget.ProgressBar.Small"
     android:layout_marginRight="5dp" />

But if I want to make a square instead of the circle how can I do it? How do I pass my 4 images to the progress bar?

example:

Answer 1

Generally you do have 2 options:

1. As already mentioned, use an animation-list and just swap pictures.

This one is probably the easier solution, since they can relatively easy be animated with AnimationDrawable. The only drawback would be that you need at least 16 images (in all resolutions) for your given result.

2. Use a custom drawable.

This is the more complicated approach. You will have to do the drawing and animating yourself, which is a hard task for most people with little good documentation.

Therefore you have to extends Drawable implements Runnable, Animatable and supply some good implementations.

The following is a basic impelmentation, calculating the positions once, then drawing them. The animation (the size of the individual circles) can and should be further tweaked ;)

Result in 3 variants:

public class RectProgressDrawable extends Drawable implements Runnable, Animatable {
    private static final long FRAME_DELAY = 1000 / 60;
    private static final String TAG = "RectProgressDrawable";
    private boolean mRunning = false;
    private long mStartTime;
    private int mDuration = 1000;

    private Paint mPaint;

    private float[] posX;
    private float[] posY;
    private float mSize;
    private int mPoints = 5;

    /**
     * The padding in px.
     */
    private int mPadding = 4;
    private int mAnimatedPoints = 5;

    public void setPoints(int points) {
        if (points != mPoints) {
            mPoints = points;
            init();
        }
    }

    private void init() {
        if (mPaint == null) {
            mPaint = new Paint();
            mPaint.setColor(Color.WHITE);
            mPaint.setAntiAlias(true);
            mPaint.setStyle(Paint.Style.FILL);
        }

        posX = new float[(mPoints - 1) * 4];
        posY = new float[(mPoints - 1) * 4];

        Rect bounds = new Rect();
        bounds.set(getBounds());
        bounds.inset(mPadding, mPadding);

        float cellWidth = ((float) bounds.width()) / ((float) mPoints);
        float cellHeight = ((float) bounds.height()) / ((float) mPoints);

        float min = Math.min(cellWidth, cellHeight);
        mSize = min / (mPoints - 1);

        for (int i = 0; i < mPoints; i++) { // top row
            posX[i] = bounds.left + cellWidth * (float) i + cellWidth / 2;
            posY[i] = bounds.top + cellHeight / 2;
        }
        for (int i = 0; i < mPoints - 2; i++) { // sides
            // right side top bottom
            posX[mPoints + i] = bounds.left + cellWidth * (mPoints - 1) + cellWidth / 2;
            posY[mPoints + i] = bounds.top + cellHeight * (i + 1) + cellHeight / 2;
            //left side bottom top
            posX[3 * mPoints - 2 + i] = bounds.left + cellWidth / 2;
            posY[3 * mPoints - 2 + i] = bounds.top + cellHeight * (mPoints - 2 - i) + cellHeight / 2;
        }
        for (int i = 0; i < mPoints; i++) { // bottom from right to left
            posX[2 * mPoints - 2 + i] = bounds.left + cellWidth * (mPoints - 1 - i) + cellWidth / 2;
            posY[2 * mPoints - 2 + i] = bounds.top + cellHeight * (mPoints - 1) + cellHeight / 2;
        }
    }

    @Override
    public void draw(Canvas canvas) {
        if (isRunning()) {
            // animation in progress
            final int save = canvas.save();

            long timeDiff = SystemClock.uptimeMillis() - mStartTime;

            float progress = ((float) timeDiff) / ((float) mDuration); // 0..1
            int level = ((int) (progress * posX.length)) % posX.length; // current value 0..posX.length

            for (int i = 0; i < posX.length; i++) {
                if ((i >= level && i < level + mAnimatedPoints) || level + mAnimatedPoints > posX.length && i < (level + mAnimatedPoints) % posX.length) {
                    float num = (i - level + posX.length) % posX.length; // 0..5
                    float size = mSize * (1 + (num * (1f / mAnimatedPoints)));
                    float sizeNext = mSize * (1 + ((num + 1) * (1f / mAnimatedPoints)));

                    float levelProgress = progress * posX.length - (int) (progress * posX.length);
                    float currentSize;
                    if (num == (mAnimatedPoints - 1)) {
                        // grow to next size
                        currentSize = mSize + (size - mSize) * levelProgress;
                    } else {
                        // shrink
                        currentSize = size + (sizeNext - size) * (1 - levelProgress);
                    }

                    canvas.drawCircle(posX[i], posY[i], currentSize, mPaint);
                } else {
                    canvas.drawCircle(posX[i], posY[i], mSize, mPaint);
                }
            }

            canvas.restoreToCount(save);
        } else {
            // draw normal
            for (int i = 0; i < posX.length; i++) {
                canvas.drawCircle(posX[i], posY[i], mSize, mPaint);
            }
        }
    }

    @Override
    public void setBounds(int left, int top, int right, int bottom) {
        super.setBounds(left, top, right, bottom);
        init();
    }

    @Override
    public void setAlpha(int alpha) {

    }

    @Override
    public void setColorFilter(ColorFilter colorFilter) {

    }

    @Override
    public int getOpacity() {
        return 0;
    }

    @Override
    public void start() {
        if (mRunning) stop();
        mRunning = true;
        mStartTime = SystemClock.uptimeMillis();
        invalidateSelf();
        scheduleSelf(this, SystemClock.uptimeMillis() + FRAME_DELAY);
    }

    @Override
    public void stop() {
        unscheduleSelf(this);
        mRunning = false;
    }

    @Override
    public boolean isRunning() {
        return mRunning;
    }

    @Override
    public void run() {
        invalidateSelf();
        long uptimeMillis = SystemClock.uptimeMillis();
        if (uptimeMillis + FRAME_DELAY < mStartTime + mDuration) {
            scheduleSelf(this, uptimeMillis + FRAME_DELAY);
        } else {
            mRunning = false;
            start();
        }
    }

    public void setAnimatedPoints(int animatedPoints) {
        mAnimatedPoints = animatedPoints;
    }
}

Use with

    ProgressBar progressBar = (ProgressBar) findViewById(R.id.progress);
    progressBar.setIndeterminateDrawable(new RectProgressDrawable());
    progressBar.setIndeterminate(true);

Alternatively you can see the full source code in a working project here

Answer 2

I'm doing it with bunch of images and animation-list:

<?xml version="1.0" encoding="utf-8"?>
<ImageView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/loadingAnimationImageView"
    android:layout_width="36dp"
    android:layout_height="36dp"
    android:background="@drawable/loading_progress_indicator_animation" />

And res\drawable\loading_progres_indicator_animation.xml:

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/selected"
    android:oneshot="false">
    <item
        android:drawable="@drawable/loading_progress_indicator_0"
        android:duration="40" />
    <item
        android:drawable="@drawable/loading_progress_indicator_1"
        android:duration="40" />
    <item
        android:drawable="@drawable/loading_progress_indicator_2"
        android:duration="40" />
    .....
    <item
        android:drawable="@drawable/loading_progress_indicator_11"
        android:duration="40" />
    <item
        android:drawable="@drawable/loading_progress_indicator_12"
        android:duration="40" />
</animation-list>

Where every loading_progress_indicator_XX image is a state of progress indicator.

The custom view with indicator:

public final class LoadingAnimationView extends FrameLayout {

    ImageView loadingAnimationImageView;
    AnimationDrawable loadingProgressAnimation;
    Handler handler = new Handler(Looper.getMainLooper());

    public LoadingAnimationView(Context context) {
        super(context);
        initialize();
    }

    private void initialize() {
        LayoutInflater.from(getContext()).inflate(R.layout.view_loading_videoview, this);
        loadingAnimationImageView = (ImageView)getView().findViewById(R.id.loadingAnimationImageView);
        loadingProgressAnimation = (AnimationDrawable) loadingAnimationImageView.getBackground();
        adaptToVisibility(getVisibility());
    }

    @Override
    public void setVisibility(int visibility) {
        super.setVisibility(visibility);
        adaptToVisibility(visibility);
    }

    void adaptToVisibility(final int visibility) {
        if (visibility == VISIBLE) {
            loadingProgressAnimation.start();
            //This is to avoid "blinking" of progress indicator (if page is loading from cache)
            handler.postDelayed(new Runnable() {
                @Override
                public void run() {
                    loadingAnimationImageView.setVisibility(visibility);
                }
            }, 200);
        } else {
            loadingProgressAnimation.stop();
            loadingAnimationImageView.setVisibility(visibility);
        }
    }
}

As a result, in my case it looks like:

So all you will need is the states of your indicator & custom view like the one above.

To get states of your indicator, you can convert gif to list of pngs I'd suggest to use EzGif service:

Another option - you can re-use one of dozens custom implementations of loading indicator like this one (it has some close enough to yours indicators) or this one (though, most of opensource indicators are circular).

I hope it helps.

Answer 3

Yes, you need to create a custom view for this, but there is an additional Android library which could be helpful for you.

Please check: https://github.com/mrwonderman/android-square-progressbar

Examples of using this library:

Check also this: How to make a Square progress-bar with changing color in certain time interval?

Here you would find how to create your own implementation of this lib.

Hope it help