Fixes #3479: Implement Progress Bar for Zoom Activity (#3481)

* ZoomableActivity: add hierarchy to view for displaying progress bar

* CircularProgressBar: circular progress bar for ZoomableDraweeView

* ZoomableActivity: add indeterministic loading spinner

* activity_zoomable: add inderterministic Progressbar

* remove circular progressbar and make changes to controller listener

Author: kbhardwaj123

app/src/main/java/fr/free/nrw/commons/media/ZoomableActivity.java

@@ -6,21 +6,30 @@
 import butterknife.BindView;
 import butterknife.ButterKnife;
 import fr.free.nrw.commons.R;
+import com.facebook.drawee.drawable.ProgressBarDrawable;
 import fr.free.nrw.commons.media.zoomControllers.zoomable.DoubleTapGestureListener;
 import fr.free.nrw.commons.media.zoomControllers.zoomable.ZoomableDraweeView;
 import timber.log.Timber;
 
 import android.graphics.Bitmap;
 import android.graphics.BitmapFactory;
+import android.graphics.drawable.Animatable;
 import android.net.Uri;
 import android.os.Bundle;
 import com.facebook.drawee.backends.pipeline.Fresco;
+import com.facebook.drawee.controller.BaseControllerListener;
+import com.facebook.drawee.controller.ControllerListener;
+import com.facebook.drawee.drawable.ScalingUtils;
+import com.facebook.drawee.generic.GenericDraweeHierarchy;
+import com.facebook.drawee.generic.GenericDraweeHierarchyBuilder;
 import com.facebook.drawee.interfaces.DraweeController;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
+import android.widget.ProgressBar;
 
 import com.facebook.drawee.view.SimpleDraweeView;
+import com.facebook.imagepipeline.image.ImageInfo;
 import com.github.chrisbanes.photoview.PhotoView;
 
 import java.io.InputStream;
@@ -32,6 +41,8 @@ public class ZoomableActivity extends AppCompatActivity {
 
     @BindView(R.id.zoomable)
     ZoomableDraweeView photo;
+    @BindView(R.id.zoom_progress_bar)
+    ProgressBar spinner;
 
     @Override
     protected void onCreate(Bundle savedInstanceState) {
@@ -48,13 +59,42 @@ protected void onCreate(Bundle savedInstanceState) {
         init();
     }
 
+    /**
+     * Two types of loading indicators have been added to the zoom activity:
+     *  1.  An Indeterminate spinner for showing the time lapsed between dispatch of the image request
+     *      and starting to receiving the image.
+     *  2.  ProgressBarDrawable that reflects how much image has been downloaded
+     */
+    private final ControllerListener loadingListener = new BaseControllerListener<ImageInfo>() {
+        @Override
+        public void onSubmit(String id, Object callerContext) {
+            // Sometimes the spinner doesn't appear when rapidly switching between images, this fixes that
+            spinner.setVisibility(View.VISIBLE);
+        }
+
+        @Override
+        public void onIntermediateImageSet(String id, @Nullable ImageInfo imageInfo) {
+            spinner.setVisibility(View.GONE);
+        }
+        @Override
+        public void onFinalImageSet(String id, @Nullable ImageInfo imageInfo, @Nullable Animatable animatable) {
+            spinner.setVisibility(View.GONE);
+        }
+    };
     private void init() {
         if( imageUri != null ) {
+            GenericDraweeHierarchy hierarchy = GenericDraweeHierarchyBuilder.newInstance(getResources())
+                    .setActualImageScaleType(ScalingUtils.ScaleType.FIT_CENTER)
+                    .setProgressBarImage(new ProgressBarDrawable())
+                    .setProgressBarImageScaleType(ScalingUtils.ScaleType.FIT_CENTER)
+                    .build();
+            photo.setHierarchy(hierarchy);
             photo.setAllowTouchInterceptionWhileZoomed(true);
             photo.setIsLongpressEnabled(false);
             photo.setTapListener(new DoubleTapGestureListener(photo));
             DraweeController controller = Fresco.newDraweeControllerBuilder()
                     .setUri(imageUri)
+                    .setControllerListener(loadingListener)
                     .build();
             photo.setController(controller);
         }

app/src/main/res/layout/activity_zoomable.xml

@@ -13,5 +13,14 @@
         android:layout_width="match_parent"
         app:actualImageScaleType="fitCenter"
         />
+    <ProgressBar
+        android:layout_width="@dimen/dimen_72"
+        android:layout_height="@dimen/dimen_72"
+        android:id="@+id/zoom_progress_bar"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintLeft_toLeftOf="parent"
+        app:layout_constraintRight_toRightOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        />
 
 </androidx.constraintlayout.widget.ConstraintLayout>