Getting two different views in one RecyclerView using Firebase in Android

Question

I developed an application that has two posts

• Picasso Post
• Record video using Youtube Api.

I implemented both with RecyclerView and Firebase recyclerAdapter , but the problem is that I don’t know how to distinguish between both views, if I use the video view using Youtube Api it attaches to the image view and also gets a copy to all elements in recyclerView, and then in all elements only one video is played. I want that if I want to show an image, then the element receives only the image, and if I want to show the video, then the reyclerView element receives the video without repeating. Like Instagram. I searched many forums, but did not get any help from them. please help. I use Firebase as my database and ViewHolders match this.

Class file for Image and Video messages:

FirebaseRecyclerAdapter <post, postViewHolder> firebaseRecyclerAdapter = new FirebaseRecyclerAdapter<post, postViewHolder>(
    post.class,
    R.layout.post_row_recycle_home,
    postViewHolder.class,
    mDatabaseReference
) {
    @Override
    protected void populateViewHolder(postViewHolder viewHolder, post model, int position) {
        viewHolder.setimage(getApplicationContext(), model.getImage());
        viewHolder.setYoutube(model.getYoutube()); 
    }
};

mrecyclerView.setAdapter(firebaseRecyclerAdapter);

Holder:

public static class postViewHolder extends RecyclerViewPager.ViewHolder{

    View mView;

    public postViewHolder(View itemView) {
        super(itemView);
        mView = itemView;
    }

    public void setYoutube(final String youtube){
        final YouTubePlayerView youPlay = (YouTubePlayerView) mView.findViewById(R.id.youtuber);
        youPlay.initialize("SOME KEY",
            new YouTubePlayer.OnInitializedListener() {
                @Override
                public void onInitializationSuccess(YouTubePlayer.Provider provider,
                                                    YouTubePlayer youTubePlayer, boolean b) {

                    youTubePlayer.cueVideo(youtube);
                }
                @Override
                public void onInitializationFailure(YouTubePlayer.Provider provider,
                                                    YouTubeInitializationResult youTubeInitializationResult) {

            }
        });
    }

    public void setimage(final Context ctx, final String image){
        final ImageView post_image = (ImageView)mView.findViewById(R.id.post_image);

         Picasso.with(ctx).load(image)
            .networkPolicy(NetworkPolicy.OFFLINE).into(post_image, new Callback() {

            @Override
            public void onSuccess() {
            }
            @Override
            public void onError() {
                Picasso.with(ctx).load(image).into(post_image);
            }
        });
    }
}

Example screenshot:

Answer 1

You can select the type of display that will be shown using the adapters getItemViewType. Inside, firebaseRecyclerAdapteradd the following:

private static final int TYPE_YOUTUBE = 1111;
private static final int TYPE_IMAGE = 2222;

@Override
public int getItemViewType(int position) {
    //note: classes should start with uppercase
    Post model = getItem(position);
    if (model.isYoutube()) { //note: you'll have to define this method
        return TYPE_YOUTUBE; 
    } else {
        return TYPE_IMAGE;
    }
}

Then inside onCreateViewHolderyou check what type to create:

@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    RecyclerView.ViewHolder holder;
    switch (viewType) {
        case TYPE_YOUTUBE:
                //note: save an inflater when you construct the adapter
                return new YtViewHolder(inflater.inflate(R.layout.item_youtube, parent, false));
        case TYPE_IMAGE:
                return new ImgViewHolder(inflater.inflate(R.layout.item_image, parent, false));
        }

    }

Separate your VH models:

public abstract class PostViewHolder extends RecyclerView.ViewHolder { //note: extends changed
    public abstract void bind(final String input){
}

public static class YtViewHolder extends PostViewHolder { //note: extends changed

    private YouTubePlayerView mView;

    public YtViewHolder(View itemView) {
        super(itemView);
        mView = (YouTubePlayerView) itemView.findViewById(R.id.youtuber);
    }

    public void bind(final String youtube){
        mView.initialize("SOME KEY",
            new YouTubePlayer.OnInitializedListener() {
                @Override
                public void onInitializationSuccess(YouTubePlayer.Provider provider, YouTubePlayer youTubePlayer, boolean b) {
                    youTubePlayer.cueVideo(youtube);
                }

                @Override
                public void onInitializationFailure(YouTubePlayer.Provider provider, YouTubeInitializationResult youTubeInitializationResult) {

                }
        });
    }

}

public static class ImgViewHolder extends PostViewHolder {

    private ImageView mView;

    public ImageView(View itemView) {
        super(itemView);
        mView = (ImageView) itemView.findViewById(R.id.post_image);
    }

    public void bind(final String image){
        Picasso.with(mView.getContext()).load(image).networkPolicy(NetworkPolicy.OFFLINE).into(mView, new Callback() {

            @Override
            public void onSuccess() {
            }
            @Override
            public void onError() {
                Picasso.with(ctx).load(image).into(mView);
            }
        });
    }

}

Then your fill method can be simplified as follows:

@Override
protected void populateViewHolder(PostViewHolder viewHolder, post model, int position) {
    viewHolder.bind(model.isYoutube()? model.getYoutube() : model.getImage());
}

Various items:

then in all elements only one video will be played

. , . , , , . , getItem, ( Firebase ). , model.getYoutube .. .

Answer 2

viewType .

FirebaseRecyclerAdapter RecyclerView.ViewHolder.class postViewHolder.class

, , 1 2, onCreateViewHolder , getItemViewType

: -

protected void populateViewHolder(final RecyclerView.ViewHolder viewHolder, final post model,
                                          final int position) {
            switch (model.getType()) {
                case 1:
                    populateType1((ViewHolder1) viewHolder, model, position);
                    break;
                case 2:
                    populateType2((ViewHolder2) viewHolder, model, position);
                    break;
            }

onCreatView : -

 @Override
        public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            switch (viewType) {
                case 1:
                    View modelType1 = LayoutInflater.from(parent.getContext())
                            .inflate(R.layout.item_type1, parent, false);
                    return new ViewHolder1(modelType1);
                case 2:
                    View modelType2 = LayoutInflater.from(parent.getContext())
                            .inflate(R.layout.item_type2, parent, false);
                    return new ViewHolder2(modelType2);
            }
            return super.onCreateViewHolder(parent, viewType);
        }

getItemViewType

@Override
        public int getItemViewType(int position) {
            post model = getItem(position);
            switch (model.getType()) {
                case 1:
                    return model1;
                case 2:
                    return model2;

            }
            return super.getItemViewType(position);
        }

Answer 3

viewHolders with two views

public class MultiViewAdapter extends RecyclerView.Adapter {

private ArrayList dataSet;
Context mContext;
int total_types;


/*
   Image TypeViewHolder
 */
public class ImageTypeViewHolder extends RecyclerView.ViewHolder {

    ImageView img;
    public ImageTypeViewHolder(View itemView) {
        super(itemView);
        this.img = (ImageView) itemView.findViewById(R.id.imageview);


    }
}

/*
    Youtube View Holder
 */
public  class YoutubeTypeViewHolder extends RecyclerView.ViewHolder {



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

        // add

    }
}


public MultiViewAdapter(ArrayList data, Context context) {
    this.dataSet = data;
    this.mContext = context;
    total_types = dataSet.size();
}


@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

    View view;
    switch (viewType) {

        case typeImage:
            view = LayoutInflater.from(parent.getContext()).inflate(R.layout.type_image, parent, false);
            return new ImageTypeViewHolder(view);

        case typeVideo:
            view = LayoutInflater.from(parent.getContext()).inflate(R.layout.type_video, parent, false);
            return new YoutubeTypeViewHolder(view);
    }
    return null;
}

@Override
public int getItemViewType(int position) {

    switch (position) {

        case 0:
            return typeImage;
        case 1:
            return typeVideo;


    }
}


@Override
public void onBindViewHolder(final RecyclerView.ViewHolder holder, final int listPosition) {

    Post object = getItem(listPosition);

    if (object != null) {
        switch (object.type) {

            case typeImage:

                ((ImageTypeViewHolder) holder).image.setImageResource(object.data);
                break;
            case typeVideo:
                // ADD video
                break;

        }
    }
}





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