How To Populate A Gridview With Images Retreieved From Firebase Storage

Question

I have reviewed other similar posts before posting this, mine is different I am current retrieving a list of download urls from my Firestore data base, then trying to download those images from my firebase storage to display them in a gridview.

This is my code so far:

final Query chatRoomMsgs = db.collection("chatrooms").document(chatRoomID).collection("Messages").whereEqualTo("sentby", firebaseAuth.getUid());
    chatRoomMsgs.get()
            .addOnSuccessListener(new OnSuccessListener<QuerySnapshot>() {
                @Override
                public void onSuccess(QuerySnapshot queryDocumentSnapshots) {
                    ArrayList<String> sentPicsURLS = new ArrayList<String>();

                    for(QueryDocumentSnapshot documentSnapshot: queryDocumentSnapshots){

                        for(int i = 0; i < queryDocumentSnapshots.size(); i++) {
                            sentPicsURLS.add(documentSnapshot.get("image").toString());

                            if(i == (queryDocumentSnapshots.size()-1)){
                                //now download the images and place them into the proper view
                                for(int z = 0; z < sentPicsURLS.size(); z++){


                                }

                            }
                        }

                    }
                }
            })
            .addOnFailureListener(new OnFailureListener() {
                @Override
                public void onFailure(@NonNull Exception e) {

                }
            });

This is where the images should be pulled and pushed into a gridview:

for(int z = 0; z < sentPicsURLS.size(); z++){
         //right here    
}

But I am having trouble creating an adapter that can handle this. I have a valid gridview in the activity and I have a layout file that contains an imageview with a ID.

final ArrayAdapter arrayAdapter = new ArrayAdapter(Chatroom.this, R.layout.chatroom_sent_images,R.id.sent_iv);
    sentPics.setAdapter(arrayAdapter);
    sentPics.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            //empty for now
        }
    });

The part I am missing (seems to be) where I actually loop through sentPicsURLS and then add them to the adapter... maybe with something like arrayAdapter.addAll(sentPicsURLS); inside the //right here for loop?

Right now the gridview is showing empty without even the default image view included in R.layout.chatroom_sent_images. I feel like I am so close, what am I missing? Thanks!

Edit Here is my chatroom database structure, every chatroom and chatroom message is structured the same way.

Answer 1

As I see in your screenshot, your document hols only a single image. So to solve this, there is no need for an extra inner for-loop. To create a list of those images, please use the following lines of code:

Query chatRoomMsgs = db.collection("chatrooms").document(chatRoomID)
    .collection("Messages").whereEqualTo("sentby", firebaseAuth.getUid());
chatRoomMsgs.get().addOnCompleteListener(new OnCompleteListener<QuerySnapshot>() {
    @Override
    public void onComplete(@NonNull Task<QuerySnapshot> task) {
        if (task.isSuccessful()) {
            ArrayList<String> sentPicsURLS = new ArrayList<>();
            for (QueryDocumentSnapshot document : task.getResult()) {
                sentPicsURLS.add(document.getString("image"));
            }
            //Do what you need to do with your list
            Log.d(TAG, "List size: " + sentPicsURLS.size());
        }
    }
});

Be also aware that Firebase APIs are asynchronous and you can use that list only inside the callback. Now, the result in your logcat will be size of your list.