How do i set ImageView,TextViews of an activity by retriving Image,TextViews that i uploaded to firebase database or storage?

Question

I am creating a new android application that retrieves one image,two texts that have been uploaded to firebase using different or say admin app,and the uploaded image and text views will be retrieved into one single card view as shown in image. which is in a recyclerview,now,i want it to be like any other blog app.So that when the user click on that card view,the imageview,the heading,the matter all these views will be arranged in a default layout as shown in image below.I mean like setting the image view to the image been retrieved from firebase and both text views to the texts retrieved from firebase.So that when ever any user clicks any blog post that retrieved from firebase,it should open that default layout and all the views will go to their places declared.how can i achieve this?. The code that i used to retrieve and show the content in a cardview is as below.As i am new to stackoverflow,i dont have enough reputation to add images.please go through the image links below. image one https://ibb.co/kJtvNTm

https://ibb.co/KXB8fdj

This is for my own educational purpose,i am new in developing android applications and firebase.I tried retrieving them but it doesn't do will to put them in their place

PostRecyclerActivity.java

    private RecyclerView mRecyclerView;
    private PostImageAdapter mAdapter;

    private ProgressBar mProgressCircle;

    private DatabaseReference mDatabaseRef;
    private List<PostUpload> mUploads;

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

        mRecyclerView = findViewById(R.id.post_recycler_view);
        mRecyclerView.setHasFixedSize(true);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this));

        mProgressCircle = findViewById(R.id.post_progress_circle);

        mUploads = new ArrayList<>();

        mDatabaseRef = FirebaseDatabase.getInstance().getReference("posts");

        mDatabaseRef.addValueEventListener(new ValueEventListener() {
            @Override
            public void onDataChange(DataSnapshot dataSnapshot) {
                for (DataSnapshot postSnapshot : dataSnapshot.getChildren()) {
                    PostUpload upload = postSnapshot.getValue(PostUpload.class);
                    mUploads.add(upload);
                }

                mAdapter = new PostImageAdapter(PostImageRecyclerActivity.this, mUploads);

                mRecyclerView.setAdapter(mAdapter);
                mProgressCircle.setVisibility(View.INVISIBLE);
            }

            @Override
            public void onCancelled(DatabaseError databaseError) {
                Toast.makeText(PostImageRecyclerActivity.this, databaseError.getMessage(), Toast.LENGTH_SHORT).show();
                mProgressCircle.setVisibility(View.INVISIBLE);
            }
        });
    }
}

PostImageAdapter.java

public class PostImageAdapter extends RecyclerView.Adapter<PostImageAdapter.ImageViewHolder> {
    private Context mContext;
    private List<PostUpload> mUploads;

    public PostImageAdapter(Context context, List<PostUpload> uploads) {
        mContext = context;
        mUploads = uploads;
    }

    @Override
    public ImageViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(mContext).inflate(R.layout.post_card, parent, false);
        return new ImageViewHolder(v);
    }

    @Override
    public void onBindViewHolder(ImageViewHolder holder, int position) {
        PostUpload uploadCurrent = mUploads.get(position);
        holder.textViewName.setText(uploadCurrent.getHeading());
        Picasso.get()
                .load(uploadCurrent.getmImageUrl())
                .fit()
                .centerCrop()
                .into(holder.imageView);
    }

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

    public class ImageViewHolder extends RecyclerView.ViewHolder {
        public TextView textViewName;
        public ImageView imageView;

        public ImageViewHolder(View itemView) {
            super(itemView);

            textViewName = itemView.findViewById(R.id.text_view_name);
            imageView = itemView.findViewById(R.id.post_image_view_upload);
        }
    }
}

PostUpload.java

public class PostUpload {

    private String mHeading;
    private String mMatter;
    private String mImageUrl;

    public PostUpload() {
    }

    public PostUpload(String heading, String matter, String imageUrl) {
        if (heading.trim().equals("")) {

            heading = "No Name";
        }
        mHeading = heading;
        mMatter = matter;
        mImageUrl = imageUrl;

    }

    public String getHeading(){
        return mHeading;
    }
    public void setHeading(String name){
        mHeading=name;
    }
    public String getMatter(){
        return mMatter;
    }
    public void setMatter(String name){
        mMatter=name;
    }
    public String getmImageUrl(){
        return mImageUrl;
    }
    public  void setImageUrl(String imageUrl){
        mImageUrl=imageUrl;
    }
}

I expect the output after clicking the blog-post should be having the image and heading set in their places as shown in image two and and a matter is retrieved from firebase and set into the other text view as shown in image two.

Answer 1

When you are getting the data from Firebase, you are storing it at your mUploads array of type PostUpload the data that you want to show into those CardViews

Here

 mDatabaseRef.addValueEventListener(new ValueEventListener() {
            @Override
            public void onDataChange(DataSnapshot dataSnapshot) {
                for (DataSnapshot postSnapshot : dataSnapshot.getChildren()) {
                    PostUpload upload = postSnapshot.getValue(PostUpload.class);
                    mUploads.add(upload);
                }

                mAdapter = new PostImageAdapter(PostImageRecyclerActivity.this, mUploads);

                mRecyclerView.setAdapter(mAdapter);
                mProgressCircle.setVisibility(View.INVISIBLE);
            }

            @Override
            public void onCancelled(DatabaseError databaseError) {
                Toast.makeText(PostImageRecyclerActivity.this, databaseError.getMessage(), Toast.LENGTH_SHORT).show();
                mProgressCircle.setVisibility(View.INVISIBLE);
            }
        });

When you hit mRecyclerView.setAdapter(mAdapter); you already have filled the array and show the info to the user.

After that you can use the getItem() from the adapter.

You just need to override that method inside your PostImageAdapter

public PostUpload getItem(int position) {
  return mUploads.get(position);
}

Once you have this method, you can access any item from the array filled from Firebase in your PostRecyclerActivity.java

So, after you click an item in your RecyclerView, you can get the position and get the object info from that position

Here are many good ways to implement the click of each row of the recyclerview (I recommend the first one)

So, after you implement the click of each row in your recyclerview, just pass that data throught a bundle or extras to the other Activity

Pseudo code Example

recyclerView.onClick{...
  public void recyclerViewListClicked(View v, int position){
    if(mAdapter.getItemCount() > 0){
    PostUpload post = mAdapter.getItem(position);
    }else{
     Toast("There is no data into the element");
    }

 //Go to another Activity
  Intent intent = new Intent(PostRecyclerActivity.this,yourSecondActivity.class);
  intent.putExtra(post.getHeadding,"postheading");
  intent.putExtra(post.getMatter,"postmatter");
  //You keep doing the same with the other data you need to send out.
  startActivity(intent);
}

How to get the data from Activity2

Intent intent = getIntent();
String postheading = intent.getStringExtra("postheading");
String postmatter = intent.getStringExtra("postmatter");

Since the image is an URL of type String , just pass it as intent.putExtra() as we did before and you can get that URL from the other Activity and inflate your image.