5

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?

Doug
  • 313
  • 3
  • 13
  • Possible duplicate of [How to create circular ProgressBar in android?](http://stackoverflow.com/questions/27213381/how-to-create-circular-progressbar-in-android) – piotrek1543 Jan 20 '16 at 22:54
  • 2
    @piotrek1543: It's not a duplicated because I want specifically a Progressbar that extends from Drawable as required by Fresco. Anyway, this other question is closed as too broad. And the answers doesn't solve my problem. – Doug Jan 21 '16 at 11:57

2 Answers2

4

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);
}

}
Outofdate
  • 635
  • 5
  • 16
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

Sam
  • 546
  • 3
  • 16