Use different layout for text and image in recyclerview from firebase database?

Question

I want to use a different layout for data which is contain text only and text + image in Recyclerview.

I have created two layout, layout_post for text only data, and layout_post_with_image for text + image data.

so far my code is working to show of two different layout in RecycleView, but the problem is it only show layout_post_with_image in the first data, layout_post in the second data, and in the third and on its show layout_post_with_image, whatever data i put, the layout shows the same pattern. so anyone could help me?

here the viewholder

import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import com.example.myapp.R;
import java.awt.font.TextAttribute;

public class PostViewHolder extends RecyclerView.ViewHolder {
public TextView textPost;
public TextView textTime;
public ImageView postImage;

public PostViewHolder(View itemView){
    super(itemView);
    textPost = (TextView) itemView.findViewById(R.id.post_description);
    textTime = (TextView) itemView.findViewById(R.id.post_time);
    postImage = (ImageView) itemView.findViewById(R.id.post_image);
 }
}

here the model

package com.example.myapp.model;

public class Posts {
public String time, post, uid, image;

public Posts() {
}
public Posts(String time, String post, String uid, String image) {
    this.time = time;
    this.post = post;
    this.uid = uid;
    this.image = image;
}
public String getTime() {
    return time;
}
public void setTime(String time) {
    this.time = time;
}
public String getPost() {
    return post;
}
public void setPost(String post) {
    this.post = post;
}
public String getUid() {
    return uid;
}
public void setUid(String uid) {
    this.uid = uid;
}
public String getImage() {
    return image;
}
public void setImage(String image) {
    this.image = image;
}
}

and here the homefragment

    postListView = (RecyclerView)rootView.findViewById(R.id.all_user_post_list);
    LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getActivity());
    linearLayoutManager.setReverseLayout(true);
    linearLayoutManager.setStackFromEnd(true);
    postListView.setHasFixedSize(true);
    postListView.setLayoutManager(linearLayoutManager);
    firebaseRecyclerOptions = new FirebaseRecyclerOptions.Builder<Posts>()
            .setQuery(PostsRef, Posts.class)
            .build();
    firebaseRecyclerAdapter = new FirebaseRecyclerAdapter<Posts, PostViewHolder>(firebaseRecyclerOptions) {
        private final static int TEXT_ONLY = 1;
        private final static int TEXT_WITH_IMAGE= 0;


        public int getItemViewType(int position){
            switch (position){
                case 1:
                    return TEXT_ONLY;
                default:
                    return TEXT_WITH_IMAGE;
            }
        }

        @Override
        protected void onBindViewHolder(@NonNull PostViewHolder holder, int position, @NonNull Posts model) {
            if(holder.postImage !=null){
                holder.textTime.setText(model.getTime());
                holder.textPost.setText(model.getPost());
                Picasso.get().load(model.getImage()).into(holder.postImage);
            }else{
                holder.textTime.setText(model.getTime());
                holder.textPost.setText(model.getPost());
            }

        }

        @NonNull
        @Override
        public PostViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
          int layoutRes = 0;
            switch (viewType) {
                case TEXT_ONLY:
                    layoutRes = R.layout.layout_posts;
                    break;
                case TEXT_WITH_IMAGE:
                    layoutRes = R.layout.layout_posts_with_image;
                    break;
            }
            View view = LayoutInflater.from(parent.getContext()).inflate(layoutRes, parent, false);
            return new PostViewHolder(view);
        }
    };

    firebaseRecyclerAdapter.startListening();
    postListView.setAdapter(firebaseRecyclerAdapter);
    return rootView;

UPDATE : i think rather than use two different layout, its more easier use one layout and set visibility to every element you want to change.

Possible duplicate of [adding different layouts for every view in recyclerview](https://stackoverflow.com/questions/50984175/adding-different-layouts-for-every-view-in-recyclerview) — Ionut J. Bejan, Oct 10 '18 at 14:09

score 1 · Answer 1 · answered Oct 10 '18 at 08:56

1

This is a pretty common question. You'll have to override getItemViewType(which you've done already) and then return a different holder.

I showed my way of implementing this, in the answer given here

If you have any other questions, just ask Happy coding

answered Oct 10 '18 at 08:56

Ionut J. Bejan

734
11
28

is there something wrong with my code? cause i still get that weird behavior, like it use layout_post_with_image in the first data, layout_post in the second data, and in the third and on its show layout_post_with_image, whatever data i put, i've tried your way to implementing it, and get same result. – logchar Oct 10 '18 at 10:36
As I can see first of all your code is not complete. Second of all, getItemViewType should be inside Adapter (there is a method which is part of Adapter that you can override). And last, you are using TEXT_ONLY just for first position. – Ionut J. Bejan Oct 10 '18 at 11:56
@IonutJ.Bejan If your linked answer is indeed the answer to this question too, please link this question as a duplicate. – Frank van Puffelen Oct 10 '18 at 13:55

score 0 · Answer 2 · answered Oct 10 '18 at 08:32

0

I think, you should call getItemViewType in onBindViewHolder to avoid to check image == null and perform your check inside the method getItemViewType.

answered Oct 10 '18 at 08:32

Hocine B

391
2
8

Use different layout for text and image in recyclerview from firebase database?

2 Answers2