How do I retrieve an image from FirebaseStorage and show it in a Canvas?

Issue

My app stores images in FirebaseFirestore; they can be in jpg or png format. I have an Activity which draws a grid on a Canvas, and I want to put the images into the grid. The overall grid + images is called an ImageGrid and is defined like this (a few things left out for readability):

    public class ImageGrid extends View {

        private final Context mContext;
        private int mNumRows, mNumCols;
        private float canvas_height, canvas_width;
        private final Paint mPaint;
        private float image_cell_size;
        private String[][] image_urls;

        public ImageGrid(Context thisContext, AttributeSet attrs) {
            super(thisContext, attrs);

            mContext = getContext();
            mPaint = new Paint();

        }

        public void setSize(int numRows, int numCols) {
            mNumRows = numRows;
            mNumSts = numCols;
            invalidate();
        }

        public void setImages(String[][] images) {
            image_urls = images;
        }

        // DRAW GRID FUNCTIONS set up the grid and add the images

        protected void onDraw(Canvas canvas) {

            canvas_height = canvas.getHeight();
            canvas_width = canvas.getWidth();

            get_cell_size();    // Get the size of the cells
            // image_cell_size has now been set by get_cell_size

            // Draw axes & chart
            draw_images(canvas);      // Draw the images

        }

        // Draw images
        private void draw_images(final Canvas canvas) {

          if (mChart == null) return;

          final Resources resources = mContext.getResources();
          FirebaseStorage mStorage = FirebaseStorage.getInstance();
          final StorageReference mStorageRef = mStorage.getReference();

          for (int rr = 0; rr < mNumRows; rr++) {

            for (int cc = 0; cc < mNumSts; cc++) {

              String drawableUrl = image_urls[rr][cc];

              if(drawableUrl != null) {

* THIS IS WHERE I NEED TO GET THE IMAGE AND DISPLAY IT *

              }
            }
          }
        }
    }

So, after hunting online for how to get the image and then draw it on the Canvas, I have this:

mStorageRef.child(drawableUrl)
  .getDownloadUrl()
  .addOnSuccessListener(
    new OnSuccessListener<Uri>() {
      public void onSuccess(Uri uri) {    
        Glide.with(getContext())
             .asBitmap()
             .load(uri)
             .into(new CustomTarget<Bitmap>() {
               public void onResourceReady(
                 Bitmap resource,
                 Transition<? super Bitmap> transition) {
                   Drawable d = new BitmapDrawable(getResources(), resource);
                   d.setBounds(
                       cc * cell_size, 
                       rr * cell_size,
                       (cc + 1)*cell_size,
                       (rr + 1) * cell_size);
                   d.draw(canvas);
                 }}});

This retrieves the image from the database; when I check the debugger, d looks fine - it contains the correct image. I then set the corners of the image using setBounds - again, the values being computed here look correct, when compared to the size of the canvas and the number of images I'm fitting in. Finally, the image should be drawn on the canvas - there is no error message, but nothing appears.

I don't really know what to check next, or what else to try. Can anyone suggest anything that might work?

Solution

Ok, I figured this out. The problem was that canvas had to be declared final in draw_images, because it was being accessed from within the inner class. This meant that the inner class couldn't update it.

So, I created a class variable called mDrawables, which is an array of Drawables. Then I retrieve the Drawables one at a time in setImages and store them in mDrawables. As each is retrieved, I update the count of how many have been retrieved so far; once this is equal to the total number of images, I invalidate the ImageGrid.

Then in draw_images, when looping over the cells, I have the drawables already in mDrawables and can use them directly from there.

Answered By - Sharon