如何从 Firebase 数据库中检索图像并将其显示在 RecylerView 中？

Question

I want to retrieve images from the firebase database and show it in a recyclerview. The images are already uploaded in the database and the firebase storage. But can't seem to figure out how to retrieve the images. So far I have tried the below method but can only retrieve the Textviews.

Activity.java

public class AssetListActivity extends AppCompatActivity {

private FloatingActionButton mAddAssetBtn;

private Toolbar mToolBar;

private DatabaseReference mAssetDatabase;

private RecyclerView mAssetRecyclerView;

private DatabaseReference mAssetIndDatabase;

String barcode;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_asset_list);

    //Finding The Toolbar with it's unique Id.
    mToolBar = (Toolbar) findViewById(R.id.main_page_toolbar);

    mToolBar.setTitle("All Assets");

    //Setting Up the ToolBar in The ActionBar.
    setSupportActionBar(mToolBar);

    barcode = getIntent().getStringExtra("barcode");

    mAssetDatabase = FirebaseDatabase.getInstance().getReference().child("Assets");
    mAssetDatabase.keepSynced(true);

    mAssetRecyclerView = (RecyclerView) findViewById(R.id.assetRecyclerView);
    mAssetRecyclerView.setHasFixedSize(true);
    mAssetRecyclerView.setLayoutManager(new LinearLayoutManager(this));

   mAddAssetBtn = (FloatingActionButton) findViewById(R.id.addAssetBtn);
   mAddAssetBtn.setOnClickListener(new View.OnClickListener() {
       @Override
       public void onClick(View v) {

           Intent intent = new Intent(AssetListActivity.this , AddAssetActivity.class);
           startActivity(intent);

       }
   });

}

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

    Query query = mAssetDatabase.orderByChild("asset_name").limitToLast(50);

    //Setting the up the FirebaseRecycerOption and passing the Model of the Data and the query of the Database.
    FirebaseRecyclerOptions<AssetModel> options = new FirebaseRecyclerOptions.Builder<AssetModel>()
            .setQuery(query, AssetModel.class).build();

    FirebaseRecyclerAdapter<AssetModel , AssetViewHolder> recyclerAdapter = new FirebaseRecyclerAdapter<AssetModel , AssetViewHolder>(options) {

        @Override
        protected void onBindViewHolder(@NonNull AssetViewHolder assetViewHolder, int i, @NonNull AssetModel assetModel) {

            assetViewHolder.setAssetName(assetModel.getAsset_name());
            assetViewHolder.setAssetDescription(assetModel.getAsset_description());
            assetViewHolder.setAssetLocation(assetModel.getAsset_location());
            assetViewHolder.setAssetImage(assetModel.getAsset_image());

        }

        @NonNull
        @Override
        public AssetViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {

            //Setting up the LayoutInflater and passing on the SingleUserLayout.
            View view = LayoutInflater.from(parent.getContext())
                    .inflate(R.layout.single_asset_layout, parent, false);

            //Returning the UserViewHolder
            return new AssetViewHolder(view);

        }

    };

    mAssetRecyclerView.setAdapter(recyclerAdapter);

    recyclerAdapter.startListening();

}

public static class AssetViewHolder extends RecyclerView.ViewHolder {


    View mView;

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

        mView = itemView;

    }

    //Creating a new Method to set the Name in the RecyclerView.
    public void setAssetName(String assetName) {

        //Finding the TextView if the name with it's unique Id.
        TextView mSingleAssetName = mView.findViewById(R.id.assetTitle);
        mSingleAssetName.setText(assetName);

    }

    //Creating a new Method to set the Status in the RecyclerView.
    public void setAssetDescription(String assetDescription) {

        //Finding the TextView of the status with it's unique Id.
        TextView mSingleAssetDescription = mView.findViewById(R.id.assetDescription);
        mSingleAssetDescription.setText(assetDescription);

    }

    public void setAssetLocation(String assetLocation) {

        //Finding the TextView of the status with it's unique Id.
        TextView mSingleAssetLocation = mView.findViewById(R.id.assetLocation);
        mSingleAssetLocation.setText(assetLocation);

    }

    //Creating a new Method to set the asset_image in the RecyclerView.
    public void setAssetImage(String asset_image) {

        ImageView mAssetImgView = mView.findViewById(R.id.assetImg);
        Log.d("URL000025123" , asset_image);

        Picasso.get().load(asset_image).placeholder(R.drawable.default_avatar_img).into(mAssetImgView);

    }

}

}

Model.java

public class AssetModel {

private String asset_name;
private String asset_description;
private String asset_location;
private String asset_image;

public AssetModel() {
}

public AssetModel(String asset_name, String asset_description, String asset_location, String asset_image) {
    this.asset_name = asset_name;
    this.asset_description = asset_description;
    this.asset_location = asset_location;
    this.asset_image = asset_image;
}

public String getAsset_name() {
    return asset_name;
}

public void setAsset_name(String asset_name) {
    this.asset_name = asset_name;
}

public String getAsset_description() {
    return asset_description;
}

public void setAsset_description(String asset_description) {
    this.asset_description = asset_description;
}

public String getAsset_location() {
    return asset_location;
}

public void setAsset_location(String asset_location) {
    this.asset_location = asset_location;
}

public String getAsset_image() {
    return asset_image;
}

public void setAsset_image(String asset_image) {
    this.asset_image = asset_image;
}

}

Style.XML

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="180dp"
android:background="#EEEEEE">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:background="#FFF"
    android:layout_marginTop="8dp">

    <ImageView
        android:id="@+id/assetImg"
        android:layout_width="58dp"
        android:layout_height="58dp"
        app:srcCompat="@drawable/default_avatar_img"
        android:layout_marginTop="15dp"
        android:layout_marginStart="10dp"/>

    <TextView
    android:id="@+id/assetTitle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="30dp"
    android:layout_marginTop="15dp"
    android:layout_toEndOf="@+id/assetImg"
    android:fontFamily="@font/raleway_medium"
    android:text="This is the Title"
    android:textColor="#212423"
    android:textSize="20sp" />

<TextView
    android:id="@+id/assetDescription"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/assetTitle"
    android:layout_marginStart="30dp"
    android:layout_marginTop="10dp"
    android:layout_toEndOf="@id/assetImg"
    android:fontFamily="@font/raleway"
    android:maxLines="2"
    android:text="This is Asset Description"
    android:textSize="16sp"
    android:layout_marginBottom="10dp"/>

<TextView
    android:id="@+id/assetLocation"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/assetDescription"
    android:layout_marginStart="30dp"
    android:layout_toEndOf="@id/assetImg"
    android:fontFamily="@font/raleway"
    android:maxLines="3"
    android:text="Location Of Asset"
    android:textSize="17sp"
    android:layout_marginBottom="5dp"/>

</RelativeLayout>

I can retrieve other data such as Name And Description but can't seem to figure out how to retrieve the images and how to display them in a recyclerview.

Firebase JSON data.

Answer 1

I figured it out. If you write your read and write rules in the firebase storage in separate lines, this solves the error.

service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
  allow write: if request.auth != null;
  allow read: if true;
}
}
}