Unable to display the image (only) in RecyclerView stored in Firebase Storage

Question

I am new to using Firebase storage and facing trouble displaying images in RecyclerView. I have used FirebaseRecyclerAdapter to display my data. The data and image URL is stored in Firebase database. The issue is that only the image is not being displayed in RecyclerView.

Any help you can provide me to get this to work would be great. Thanks.

Below is my code for Recycler activity:

public class DownloadActivity extends AppCompatActivity {

ScaleAnimation shrinkAnim;
private RecyclerView mRecyclerView;
private TextView tvNoImages;
private static final String TAG = "DownloadActivty";


//Getting reference to Firebase Database
DatabaseReference database = FirebaseDatabase.getInstance().getReference();
DatabaseReference childref;
private static StorageReference mStorageRef;

//private static final String userId = "53";


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.downlad_activtiy_layout);
    childref=database.child("Photos").getRef();

    mStorageRef = FirebaseStorage.getInstance().getReference();
    //Initializing our Recyclerview
    mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);
    tvNoImages = (TextView) findViewById(R.id.tv_no_image);
    //scale animation to shrink floating actionbar
    shrinkAnim = new ScaleAnimation(1.15f, 0f, 1.15f, 0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);

    Log.i(TAG, "Set firebase adapter");
    FirebaseRecyclerAdapter<Image_model,ImageViewHolder> adapter = new FirebaseRecyclerAdapter<Image_model, ImageViewHolder>(
            Image_model.class, R.layout.image_item, ImageViewHolder.class,
            //referencing the node where we want the database to store the data from our Object
            database
    )
    {
        @Override
        protected void populateViewHolder(ImageViewHolder viewHolder, Image_model model, int position)
        {
            Log.i(TAG, "Populate Image");
            viewHolder.bindImage(model);
        }
    };

    mRecyclerView.setAdapter(adapter);
    mRecyclerView.setHasFixedSize(true);
    mRecyclerView.setLayoutManager (new LinearLayoutManager(this));

//ViewHolder for Firebase UI
public static class ImageViewHolder extends RecyclerView.ViewHolder{

    TextView tvUserName;
    TextView tvImageName;
    RatingBar ratingBar;
    ImageView ivImage;
    ImageView image;
    View viewHolder;
    Context mContext;

    public ImageViewHolder(View v) {
        super(v);
        viewHolder=v;
        mContext = v.getContext();
        }
    public void bindImage(Image_model model)
    {
        tvUserName=(TextView)viewHolder.findViewById(R.id.user_name);
        tvImageName = (TextView) viewHolder.findViewById(R.id.image_name);
        ratingBar = (RatingBar) viewHolder.findViewById(R.id.like);
        ivImage = (ImageView) viewHolder.findViewById(R.id.img);

        tvUserName.setText(model.getUserName());
        tvImageName.setText(model.getImageName());
        ratingBar.setRating(model.getImageLike());
        Picasso.with(mContext).load(model.getImage()).into(ivImage);
        //Glide.loadImage(model.getImage(),ivImage);

    }
}
}

And this is my model class

public class Image_model {

private String UserName;
private String ImageName;
private String ImageUrl;
private int ImageLike;

public Image_model(){

}
public Image_model(String UserName,String ImageName,String ImageUrl,int ImageLike){
    this.UserName=UserName;
    this.ImageName = ImageName;
    this.ImageUrl = ImageUrl;
    this.ImageLike  = ImageLike;
}

public String getUserName() {
    return UserName;
}

public void setUserName(String UserName) {
    this.UserName = UserName;
}

public String getImageName() {
    return ImageName;
}

public void setImageName(String ImageName) {
    this.ImageName = ImageName;
}

public String getImage() {
    return ImageUrl;
}

public void setImage(String ImageUrl) {
    this.ImageUrl = ImageUrl;
}

public int getImageLike() {
    return ImageLike;
}

public void setImageLike(int ImageLike) {
    this.ImageLike = ImageLike;
}
}

Answer 1

I don't know what are you doing inside your bindImagemethod. But remember that you are getting and imageURL from your model, not the image itself. I recommend you to use Glide library to set your image from URL to and imageView. Also, remember that inside your Firebase console you should use the "download URL" and not your storage reference. something like

https://firebasestorage.googleapis.com/v0/b/yourAwesomeDatabase....

I'm using Glide to set my images from Firebase in my app and I'm using this method:

  /**
    * Load an image with default values and default placeholder.
    * @param url photo Url.
    * @param imageView target view to load the desired image.
    */
   public static void loadImage(String url, ImageView imageView) {
      Context context = imageView.getContext();
      ColorDrawable cd = new ColorDrawable(ContextCompat.getColor(context, R.color.app_grey));
      Glide.with(context)
         .load(url)
         .placeholder(cd)
         .crossFade()
         .centerCrop()
         .into(imageView);
   }