Styjun

I'm building an app which allows the user to upload their own images, to use within the app. I'm using the Firebase Cloudstore database to store the information on each image, and Firebase Storage to store the actual images.

So, the images are stored in Firebase Storage in a folder called images; within that, they are given a randomly generated name, which is stored in the appropriate record in the database. Let's say the name of a particular image is "abcd.png", then the database record will look like this:

symbols 
 > key1 > name: "Test symbol"
 uid: "User's randomly generated ID"
 description: "A description, as set by the user"
 url: "images/abcd.png"

Now, I want to show all the User's uploaded images as tiny thumbnails. I'm connecting to the database, finding all symbols which belong to the current user, and then using an ArrayAdapter to display them. Unfortunately, I'm currently getting a row of blank boxes. I'm not sure what I'm doing wrong.

The symbols are shown in a Fragment called CurrentSymbolsFragment. The layout (fragment_current_symbols.xml) is:

<android.support.constraint.ConstraintLayout 
 android:layout_width="match_parent"
 android:layout_height="match_parent">

 <GridView
 android:id="@+id/gridview_symbolList"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:stretchMode="columnWidth"
 </GridView>

</android.support.constraint.ConstraintLayout>

and the class file is:

public class FragmentCurrentSymbols extends Fragment {

 private ArrayList<ChartSymbol> mSymbols;
 private Context mContext;
 private GridView mGridCurrentSymbols;

 static public FragmentCurrentSymbols newInstance(Context context,
 ArrayList<ChartSymbol> symbols) 

 if(context == null) return null;
 if(symbols == null) return null;
 if(symbols.size() == 0) return null;

 FragmentCurrentSymbols f = new FragmentCurrentSymbols();
 f.setRequiredData(context, symbols);

 return f;
 

 public void setRequiredData(Context context, ArrayList<ChartSymbol> symbols) 

 if(context == null) return;
 if(symbols == null) return;
 if(symbols.size() == 0) return;

 this.mContext = context;
 this.mSymbols = symbols;

 

 @Override
 public View onCreateView(@NonNull LayoutInflater inflater,
 ViewGroup container, Bundle savedInstanceState) 

 // Inflate layout
 View rootView = inflater.inflate(R.layout.fragment_current_symbols, container, false);

 mGridCurrentSymbols = rootView.findViewById(R.id.gridview_symbolList)

 initialiseWithSymbols();

 return rootView;
 

 // Set symbols to be shown and initialise the view
 public void setSymbols(ArrayList<ChartSymbol> symbols) 
 mSymbols = symbols;
 initialiseWithSymbols();
 

 /**
 * initialiseWithSymbols
 * Initialise the symbol list from the symbols
 * This takes the symbols and shows them, in order, in the grid
 **/
 public void initialiseWithSymbols() 

 if (mSymbols == null) return;

 // Now set up ChartSymbolAdapter to display symbols in grid
 ChartSymbolAdapter mSymbolAdapter = new ChartSymbolAdapter(mContext,
 R.layout.adapter_symbol_manage_layout,
 mSymbols);
 mGridCurrentSymbols.setAdapter(mSymbolAdapter);
 mGridCurrentSymbols.setChoiceMode(ListView.CHOICE_MODE_SINGLE);
 

The ChartSymbolAdapter class is:

public class ChartSymbolAdapter extends ArrayAdapter<ChartSymbol> 

 private Context mContext;
 private ArrayList<ChartSymbol> mSymbolArray;
 private int layoutId;
 private ChartSymbol selectedSymbol;

 public ChartSymbolAdapter(Context context, int layout_id, ArrayList<ChartSymbol> symbolArray) 
 super(context, layout_id, symbolArray);

 this.mContext=context;
 this.mSymbolArray=symbolArray;
 this.layoutId = layout_id;

 

 private static class ViewHolder 
 private SymbolCell symbolCell;
 private TextView symbolName, symbolKey;
 

 @NonNull
 @Override
 public View getView(final int position, View convertView, @NonNull ViewGroup parent) 

 ViewHolder mViewHolder;
 StorageReference mStorageRef = FirebaseStorage.getInstance().getReference();

 if(convertView == null) 
 mViewHolder = new ViewHolder();
 LayoutInflater layoutInflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
 assert layoutInflater != null;
 convertView = layoutInflater.inflate(layoutId, parent, false);
 mViewHolder.symbolCell = convertView.findViewById(R.id.symbol_cell);
 mViewHolder.symbolName = convertView.findViewById(R.id.symbol_name);
 mViewHolder.symbolKey = convertView.findViewById(R.id.symbol_key);
 convertView.setTag(mViewHolder);
 // Now add the symbol
 ChartSymbol cellSymbol = mSymbolArray.get(position);
 // Find the url
 String drawableUrl = cellSymbol.getUrl();
 // If there's a Url, use it
 if(drawableUrl != null) 
 Glide.with(getContext())
 .load(drawableUrl)
 .into(mViewHolder.symbolCell);
 
 

 return convertView;
 

The SymbolCell class extends ImageView:

public class SymbolCell extends android.support.v7.widget.AppCompatImageView 

 ChartSymbol symbol;
 Paint paint;

 public SymbolCell(Context thisContext, AttributeSet attrs) 
 super(thisContext, attrs);

 paint = new Paint();

 

 /**
 * onDraw
 * Draw a square to contain the given symbol.
 * @param canvas Canvas to draw on
 */
 protected void onDraw(Canvas canvas) 
 // Draw a box around cell
 // Set paint
 int stroke_width = 2;
 paint.setStrokeWidth(stroke_width);

 float height = getHeight();
 float width = getWidth();

 // Draw a black border for item
 paint.setColor(0xff000000);

 paint.setStyle(Paint.Style.STROKE);
 canvas.drawRect(0, 0, width - 2*stroke_width, height - 2*stroke_width, paint);

 

When I try this out, I get a series of blank boxes. There are as many boxes as I have symbols stored, so that's correct, but they're not showing the actual image. I've made sure that I'm using images which have colours going right to the edges, so that's not the issue.

This is the first time I've used Glide in a project, so am I doing something wrong there?

Using the debugger, I can see that the symbols are retrieved correctly from Firestore, and that the URL is correct. I'm not sure how to check whether Glide is actually connecting to the storage to find the image, but it's certainly not showing it.

Can anyone see where I'm going wrong?