Circular Progressbar using Fresco

Question

I need to implement a circular progress bar to be displayed and updated while Fresco downloads the image. The class must extend from Drawable as required by Fresco's method setProgressBarImage().

My class is using Fresco to load the image like the snippet below:

SimpleDraweeView simpleDraweeView = (SimpleDraweeView) view.findViewById(R.id.image);
simpleDraweeView.getHierarchy().setProgressBarImage(new ProgressBarDrawable());
simpleDraweeView.setImageURI(message.getMessageImage().getImageFileUriForList());

And the XML for the 'image' SimpleDraweeView is as follows:

<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/image"
    android:layout_width="192dp"
    android:layout_height="200dp"
    android:layout_margin="7dp"
    android:layout_gravity="center"
    fresco:actualImageScaleType="fitCenter"
    tools:background="@drawable/gallery_attach_dialog" />

The problem is that I need to replace this standard horizontal progressbar by a circular one. And Fresco doesn't provide a circular progress bar drawable.

Do anyone has an implementation idea for this?

Answer 1

You can just implement Drawable, because ProgressBarDrawable is just implementing and overriding super methods. As previously mentioned this question should be considered as duplicate.

public class ImageLoadProgressBar extends ProgressBarDrawable {


float level;

Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);

int color = whatevercolorresource;

final RectF oval = new RectF();

int radius = whateverradius;

public ImageLoadProgressBar(){
    paint.setStrokeWidth(whateveintyouputhere);
    paint.setStyle(Paint.Style.STROKE);
}

@Override
protected boolean onLevelChange(int level) {
    this.level = level;
    invalidateSelf();
    return true;
}

@Override
public void draw(Canvas canvas) {
    oval.set(canvas.getWidth() / 2 - radius, canvas.getHeight() / 2 - radius,
            canvas.getWidth() / 2 + radius, canvas.getHeight() / 2 + radius);

    drawCircle(canvas, level, color);
}


private void drawCircle(Canvas canvas, float level, int color) {
    paint.setColor(color);
    float angle;
    angle = 360 / 1f;
    angle = level * angle;
    canvas.drawArc(oval, 0, Math.round(angle), false, paint);
}

}

Answer 2

You may use the code given in Fresco Library Sample for CircularProgressDrawable. https://github.com/facebook/fresco/blob/master/samples/contrib/com/facebook/drawee/drawable/CircleProgressBarDrawable.java

But there is an issue in the above code which makes oval instead of circle, to resolve the issue you may use the following code.

https://gist.github.com/sheerazam/ef701a564624d5f6d6c632e0d254cd15