Firebase Storage Image Retrieve RecyclerView

Question

I'm trying to retrieve a firebase storage filled with images:

These images should be able to fill my recyclerviews, here is the code I have, I'm using Glide to load my images( I have the MyGlideAppModule set up correctly):

public class PicturesAdapter extends RecyclerView.Adapter<PictureViewHolder>
{
    private List<Pictures> pictureList;
    private StorageReference mStorageRef;


    public PicturesAdapter(List<Pictures> pictureList)
    {
        this.pictureList = pictureList;
    }

    @NonNull
    @Override
    public PictureViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType)
    {
        View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.picture_cv,
                parent, false);


        return new PictureViewHolder(itemView);
    }

    @Override
    public void onBindViewHolder(@NonNull PictureViewHolder holder, int position)
    {
        Pictures pi = pictureList.get(position);
        FirebaseStorage storage = FirebaseStorage.getInstance();

        mStorageRef = storage.getReference();

        GlideApp.with(holder.itemView.getContext())
                .load(mStorageRef)
                .into(holder.picture);
    }

    @Override
    public int getItemCount() {
        return pictureList.size();
    }
}

My view holder class:

public class PictureViewHolder extends RecyclerView.ViewHolder
{
    public ImageView picture;


    public PictureViewHolder(@NonNull View itemView)
    {
        super(itemView);

        picture = (ImageView) itemView.findViewById(R.id.bobbyBrown);
    }


    public ImageView getPictureContents()
    {
        return picture;
    }
}

And before I was adding images to firebase, I had each image locally stored and I would call the adapter as follows:

public class PicturesFragment extends Fragment {


    private List<Pictures> pics = null;
    private RecyclerView mRecyclerView;

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

        View v = inflater.inflate(R.layout.fragment_pictures, container, false);

        initializeView();

        mRecyclerView = (RecyclerView) v.findViewById(R.id.picList);
        mRecyclerView.setHasFixedSize(true);
        PicturesAdapter p2 = new PicturesAdapter(pics);

        LinearLayoutManager llm = new LinearLayoutManager(v.getContext());
        llm.setOrientation(LinearLayoutManager.VERTICAL);
        mRecyclerView.setLayoutManager(llm);
        mRecyclerView.setAdapter(p2);


        // Inflate the layout for this fragment
        return v;
    }

    private void initializeView()
    {
        pics = new ArrayList<Pictures>();
        pics.add(new Pictures(R.drawable.firepit1_a));
        pics.add(new Pictures(R.drawable.firepit2_a));
        pics.add(new Pictures(R.drawable.firepit3_a));
        pics.add(new Pictures(R.drawable.firepit4_a));
        pics.add(new Pictures(R.drawable.firepit5_a));
        pics.add(new Pictures(R.drawable.firepit6_a));
        pics.add(new Pictures(R.drawable.pic1));
        pics.add(new Pictures(R.drawable.pic2));
        pics.add(new Pictures(R.drawable.pic3));
        pics.add(new Pictures(R.drawable.pic4));
        pics.add(new Pictures(R.drawable.pic5));
        pics.add(new Pictures(R.drawable.pic6));
        pics.add(new Pictures(R.drawable.pic7));
        pics.add(new Pictures(R.drawable.pic8));
    }
}

How do I go about retrieving the images and filling them inside my adapter, any links to tutorials would be greatly appreciated, I haven't been able to find any yet.

Thanks

Answer 1

You can use bellow code to show firebase image imageview (and in adapter) -

 String imgPath = IMAGE_NAME or IMAGE_PATH;
                FirebaseStorage mStorage = FirebaseStorage.getInstance();
                StorageReference storageRef = mStorage.child(imgPath);
                storageRef.getDownloadUrl().addOnSuccessListener(new OnSuccessListener<Uri>() {
                    @Override
                    public void onSuccess(Uri uri) {
                        Glide.with(context)
                                .load(uri)
                                .fitCenter()
                                .diskCacheStrategy(DiskCacheStrategy.ALL)         //ALL or NONE as your requirement
                                .thumbnail(Glide.with(context).load(R.drawable.ic_image_loading))
                                .error(R.drawable.ic_image_error)
                                .into(myViewHolder.spImg);
                    }
                }).addOnFailureListener(new OnFailureListener() {
                    @Override
                    public void onFailure(@NonNull Exception exception) {
                        // Handle any errors
                        Glide.with(context)
                                .load(R.drawable.ic_image_error)
                                .fitCenter()
                                .into(myViewHolder.spImg);
                    }
                });

Answer 2

Please follow below steps:

Step 1: In your model/POJO class you need to add a field for the picture url & an ID used to differentiate among pics:

class Pictures {

    private String id;

    private String image_url;

    public String getImage_url() {
        return image_url;
    }

    public void setImage_url(String image_url) {
        this.image_url = image_url;
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }
}

Step 2: Then while uploading images into Firebase, get the download URL for the current image.

Sring mDownloadUrl;
firebaseStorageReference.putFile(resultUri)
        .addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() {
            @Override
            public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) {
                final Task<Uri> firebaseUri = taskSnapshot.getStorage().getDownloadUrl();
                firebaseUri.addOnSuccessListener(new OnSuccessListener<Uri>() {
                    @Override
                    public void onSuccess(Uri uri) {
                        mDownloadUrl = uri.toString();
                    }
                });

            }
        });

Step 3: For each picture to be uploaded on Firebase, create custom Pictures object, and get a push key from Firebase to be its unique ID; set its picture URL, and finally update Firebase database with this new Pictures object

Picutures pic = new Pictures();
DatabaseReference databaseReference = FirebaseDatabase.getInstance().getReference().child("pictures"); // I chose "pictures", but you may choose a different name

// Getting push key from firebase
String pictureId = databaseReference.push().getKey();
pic.setId(pictureId);
pic.setImage_url(mDownloadUrl);

// update Firebase database with this new Pictures object
databaseReference.child(pictureId).setValue(pic);

Step 4: Whenever you want to retrieve your list of "Pictures", add a listener to your Firebase database; it can be ValueEventListener or ChildEventListener according to your needs; here I am implementing ValueEventListener ; feel free to tell me if you want ChildEventListener implementation; this will retrieve the whole list of Pictures' from Firebase that you can populate your RecyclerView adapter with.

DatabaseReference databaseReference = FirebaseDatabase.getInstance().getReference().child("pictures");

List<Pictures> picsList = new ArrayList<>(); // RecyclerView adapter list
PicturesAdapter adapter = new PicturesAdapter(picsList);
recyclerView.setAdapter(adapter);

databaseReference.addValueEventListener(valueEventListener); 

   ValueEventListener valueEventListener = new ValueEventListener() {
            @Override
            public void onDataChange(@NonNull DataSnapshot dataSnapshot) {
                Log.d(TAG, "addValueEventListener: onDataChange()");

                // checking if database contains a non-null value
                if (dataSnapshot.exists()) {

                    for (DataSnapshot singleSnapshot : dataSnapshot.getChildren()) {
                        Pictures picture = singleSnapshot.getValue(Pictures.class);
                        picsList.add(picture);
                    }

                    recyclerView.getAdapter().notifyDataSetChanged();

                } else {
                    Log.d(TAG, "addValueEventListener: No data exists");
                }
            }

            @Override
            public void onCancelled(@NonNull DatabaseError databaseError) {
                Log.d(TAG, "addValueEventListener: onCancelled()");
            }
        };

Step 5: Modify your Adapter onBindViewHolder() to download the image

private List<Pictures> pictureList;
@Override
public void onBindViewHolder(@NonNull PictureViewHolder holder, int position)
{
    Pictures pi = pictureList.get(position);

    GlideApp.with(holder.itemView.getContext())
            .load(pi.getImage_url())
            .into(holder.picture);
}