reference firebase storage from database to load image with FirebaseRecyclerAdapter

Question

I am trying to replicate what this messageTxt.setText(downloadUrl.toString()); line of code does Link here: (one of I/O 2016 demo). It gives the EditText widget a url associated with the image stored in firebase storage and loads it appear as an image. Live demo, play at 28:37.

For my case, I intend to use firebaseui's FirebaseRecyclerAdapter to load the image, and other data such as description of image onto a recyclerview. I have already saved the data into firebase database as shown in the image below. As you can see, one of the values is the image_path which holds the url to the corresponding image in firebase storage. I used taskSnapshot.getDownloadUrl(); to get the image url.

However, when I try to load this image url to a TextView using this code,

public void setImage_path(String image) {
            feed_image = mView.findViewById(R.id.feed_image);
            feed_image.setText(image);
        }

only text appears, and the location where I expect the image to show up appears blank. How do I solve this? Thanks in advance! Full code of how I implemented it is below. Let me know if any additional code is needed such as my model class.

Code:

Feed Fragment

public class Feed extends Fragment {

    private Button upload;
    private String businessID;
    private RecyclerView rv;
    private DatabaseReference mDatabase;
    private static StorageReference mStorage;

    private FirebaseRecyclerAdapter<ImageInformation, ImageHolder> mFirebaseAdapter;

    public Feed() {
        // Required empty public constructor
    }


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

        mStorage = FirebaseStorage.getInstance().getReference("feed_photos");
       ...
    }

    @Override
    public void onStart() {
        super.onStart();

        mFirebaseAdapter = new FirebaseRecyclerAdapter<ImageInformation, ImageHolder>(
                ImageInformation.class,
                R.layout.card_item_feed,
                ImageHolder.class,
                mDatabase) {

            @Override
            public void populateViewHolder(ImageHolder holder, ImageInformation chat, int position) {
                Glide.with(Feed.this).load(chat.getImage_path()).into(holder.feed_image);
            holder.image_desc.setText(chat.getCaption());
            holder.date.setText(chat.getDate_created());
            holder.tag.setText(chat.getTags());
            }
        };
        rv.setAdapter(mFirebaseAdapter);
    }

    public static class ImageHolder extends RecyclerView.ViewHolder{

    ImageView feed_image;
    TextView image_desc;
    TextView date;
    TextView tag;

    public ImageHolder(View v) {
        super(v);
        feed_image = v.findViewById(R.id.feed_image);
        image_desc = v.findViewById(R.id.image_desc);

        date = v.findViewById(R.id.date);
        tag = v.findViewById(R.id.tags);
    }
}
}

Cardview XML

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="-3dp"
    android:layout_marginRight="-3dp"
    card_view:cardBackgroundColor="@android:color/white"
    card_view:cardCornerRadius="0dp"
    card_view:cardUseCompatPadding="false"
    card_view:contentPadding="0dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:id="@+id/linear_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <ImageView
            android:id="@+id/feed_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="0dp"
            android:adjustViewBounds="true"
            android:visibility="visible" />

        </LinearLayout>

        <TextView
            android:id="@+id/image_desc"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/linear_layout"/>

        <TextView
            android:id="@+id/date"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/linear_layout"/>

        <TextView
            android:id="@+id/tags"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/linear_layout"/>

    </RelativeLayout>

</android.support.v7.widget.CardView>

EDIT: I realised I was missing my firebase storage reference. I have added it, but still stuck as I can't find how to retrieve the Uri (selectedImageUri represents the uri variable that was in the demo). (see comments in Feed Fragment)

EDIT 2: - changed the ImageHolder class - updated content in populateViewHolder method - updated cardview widgets

Answer 1

Firstly you should have

compile 'com.squareup.picasso:picasso:2.5.2'

Library to get the image from firebase the show in whatever you want.

@Override
            public void populateViewHolder(ImageHolder holder, ImageInformation chat, int position) {
                //holder.setImage_path(chat.getImage_path());
                 Picasso.with(this).load(chat.getImage_path()).into(holder.feed_image);
                 holder.title.setText(chat.getCaption());
               // holder.setCaption(chat.getCaption());
            }
        };

For More details follow Link Here to see example