Loading Videos and Images on a RecyclerView once

Question

How can I load Images and Videos in the same list of a RecyclerView, so that when I click on a video it can play (like Facebook blog style), on Facebook images are seen and as well videos on the cardViews of a list , Is there any tutorial on this please help me. Am really stuck, I haven't got any solution on this.

How to make a single RecyclerView with both Images and Videos?

Below is my onStart Method its where there's FirebaseRecyclerAdapter it launches the list

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

        //checkUserExists();
       // mAuth.addAuthStateListener(mAuthLitsener);
try {
    FirebaseRecyclerAdapter<Posts, BlogViewHolder> firebaseRecyclerAdapter = new FirebaseRecyclerAdapter<Posts, BlogViewHolder>(Posts.class,
            R.layout.item_activity,
            BlogViewHolder.class,
            mDatabase) {
        @Override
        protected void populateViewHolder(BlogViewHolder viewHolder, final Posts model, final int position) {



            final String key_post = getRef(position).getKey();
            viewHolder.setTitle(model.getEventTitle());
            viewHolder.setDesc(model.getEventDescription());
            viewHolder.setImage(c, model.getEventImage());
            viewHolder.setVideo(c,model.getEventImage());

            viewHolder.imagePost.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {

                    Toast.makeText(getApplicationContext(),""+key_post,Toast.LENGTH_LONG).show();
                    Intent singleView = new Intent(MainActivity.this,ViewSingleImage.class);
                    singleView.putExtra("Blog",key_post);
                    singleView.putExtra("EventName",eventname);
                    startActivity(singleView);
                }
            });

        }
    };

    mRecyclerview.setAdapter(firebaseRecyclerAdapter);
}
catch (Exception ex){

    System.out.println("Error "+ ex);
}
    }

And this is MyViewHolder Class where I declared both the Images and the Url

 public static class BlogViewHolder extends RecyclerView.ViewHolder{


        View mView;
        private ImageView imagePost;

        public BlogViewHolder(View itemView) {
            super(itemView);
            mView=itemView;
            imagePost =(ImageView)mView.findViewById(R.id.post_image);
        }
        public void setTitle(String title){

            TextView post_title = (TextView)mView.findViewById(R.id.post_title);
            post_title.setText(title);

        }

        public void setDesc(String desc){

            TextView post_desc = (TextView)mView.findViewById(R.id.post_desc);
            post_desc.setText(desc);
        }


        public void setImage(final Context c,final String imageUrl){

       //

            Picasso.with(c).load(imageUrl).error(R.mipmap.add_btn).fit().centerInside().placeholder(R.mipmap.add_btn)
                    .networkPolicy(NetworkPolicy.OFFLINE).into(imagePost, new Callback() {
                @Override
                public void onSuccess() {

                }

                @Override
                public void onError() {

                    //Reloading an image again ...
                    Picasso.with(c).load(imageUrl).error(R.mipmap.add_btn).placeholder(R.mipmap.add_btn)
                            .into(imagePost);
                }
            });

        }

        public void setVideo(final Context c, final String videoUrl){

         videoLayout = (FullscreenVideoLayout) mView.findViewById(R.id.post_video);
           // videoLayout.setActivity(this);
           // videoLayout.setActivity(get);

            Uri videoUri = Uri.parse(videoUrl);
            try {
                videoLayout.setVideoURI(videoUri);

            } catch (IOException e) {
                e.printStackTrace();
            }


        }


    }

So generally, in the ViewHolder I declared the Image and the Video, so in the OnStart Method is where I placed My Adapter in order to download the ImageUrl and the VideoUrl, but the logic of checking them is still tricky, on my side

Please look at following links and use image and text view in Viewholder and check condition before creating view in onBindViewHolder() method. http://stackoverflow.com/questions/30978030/playing-video-using-textureview-in-recyclerview — Chayan Chowdhury, Nov 22 '16 at 08:26
@Chayan , thanks for your reply , but when i saw that post link you sent , its just all about videos only , what i want is when the person posts an Image it loads in the List and when the person posts a video it loads also in the RecyclerView ,i want it to have an automatic sense when the Image and the Video loads(Like the way facebook does). — huzaifah stack, Nov 22 '16 at 08:47
@huzaifah--- are you getting image URL and Video URL from server ??If you are doing getting from Server check that object type wheather it is image or video then create new view holder in OncreateViewHolder() method and bind data in obBindView() Method. do you wan to me to send some Pescudo code — Chayan Chowdhury, Nov 22 '16 at 09:30
Please and please @Chayan , help me on this , send me some example of the code — huzaifah stack, Nov 22 '16 at 19:49
Please check it below answer and do accordingly . U can achieve in this way — Chayan Chowdhury, Nov 23 '16 at 07:51
are able to make it. let me know any doubt and accept answer. — Chayan Chowdhury, Nov 23 '16 at 08:49
@Chayan , am sorry have taken time without being Online , but i tried to follow Your answer , the challenge am Getting is am `FirebaseRecyclerAdapter`, so it has a different technique of the `Adapter`, so i don't how i can check the Video and the Image with my code , check above i have Updated My post . Or even if you don't mind can you please send me your Skype Id mine is Lutaaya Huzaifah — huzaifah stack, Nov 24 '16 at 14:29
@Chayan please , try to help me to edit it according to your answer interms of Checking the Video and the Image — huzaifah stack, Nov 24 '16 at 14:47
Hello hope you r doing fine @ChayanChowdhury , did you see my post please ? — huzaifah stack, Nov 25 '16 at 10:52

score 0 · Answer 1 · answered Nov 23 '16 at 07:50

Please do following way:--

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="match_parent">

<VideoView
    android:id="@+id/videoView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

<ImageView
    android:id="@+id/imageView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true" />

 </RelativeLayout>

    In Adapterclass:---
    public class MyRecyclerViewAdapter extends RecyclerView
    .Adapter<MyRecyclerViewAdapter
    .DataObjectHolder> {
    private static String LOG_TAG = "MyRecyclerViewAdapter";
    private ArrayList<DataObject> mDataset;
    private static MyClickListener myClickListener;

    public static class DataObjectHolder extends RecyclerView.ViewHolder
        implements View
        .OnClickListener {
     TextView label;
     TextView dateTime;

     public DataObjectHolder(View itemView) {
        super(itemView);
        label = (TextView) itemView.findViewById(R.id.textView);
        dateTime = (TextView) itemView.findViewById(R.id.textView2);
        Log.i(LOG_TAG, "Adding Listener");
        itemView.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        myClickListener.onItemClick(getPosition(), v);
    }
}

  public void setOnItemClickListener(MyClickListener myClickListener) {
    this.myClickListener = myClickListener;
}

  public MyRecyclerViewAdapter(ArrayList<DataObject> myDataset) {
    mDataset = myDataset;
}

  @Override
  public DataObjectHolder onCreateViewHolder(ViewGroup parent,
                                           int viewType) {
    View view = LayoutInflater.from(parent.getContext())
            .inflate(R.layout.recyclerview_item, parent, false);

    DataObjectHolder dataObjectHolder = new DataObjectHolder(view);
    return dataObjectHolder;
}

   @Override
   public void onBindViewHolder(DataObjectHolder holder, int position) {
    DataObject dataset=mDataset.get(position)
   //   Check here image or video
     if(mdataset contains  image){
         videoview invisible or gone
    }else{
         image invisible or gone
    )

   public void addItem(DataObject dataObj, int index) {
    mDataset.add(dataObj);
    notifyItemInserted(index);
}

   public void deleteItem(int index) {
    mDataset.remove(index);
    notifyItemRemoved(index);
}

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

     public interface MyClickListener {
     public void onItemClick(int position, View v);
}

}

can try answering this post according to your answer http://stackoverflow.com/questions/40822813/both-images-and-videos-in-a-recyclerview-using-imageview-and-videoview Thanks — Lutaaya Huzaifah Idris, Nov 27 '16 at 14:10

score 0 · Answer 2 · answered Nov 28 '16 at 09:23

I can see you are using Firebase, so you are getting getEventImage()and getEventVideo() , ,so you have to check if the Urls are empty or in the setImage() and setVideo(), methods. Try out this code. And see:

public void setImage(final Context c,final String imageUrl){

            try {
                if (imageUrl!=null) {
                    //

                    Picasso.with(c).load(imageUrl).error(R.mipmap.add_btn).fit().centerInside().placeholder(R.mipmap.add_btn)
                            .networkPolicy(NetworkPolicy.OFFLINE).into(imagePost, new Callback() {
                        @Override
                        public void onSuccess() {

                        }

                        @Override
                        public void onError() {

                            //Reloading an image again ...
                            Picasso.with(c).load(imageUrl).error(R.mipmap.add_btn).placeholder(R.mipmap.add_btn)
                                    .into(imagePost);
                        }
                    });





                } else {

                    imagePost.setVisibility(View.GONE);
                }
            }
            catch (Exception e){

            }

        }

        public void setVideo(final Context c, final String videoUrl){
            try {
                if (videoUrl!=null) {
                    try {
                        Uri videoUri = Uri.parse(videoUrl);
                        try {
                            videoLayout.setVideoURI(videoUri);
                            videoLayout.setTag(videoUrl);
                            String hasVideo_string = (String) videoLayout.getTag();
                            boolean hasVideo = Boolean.parseBoolean(hasVideo_string);


                        } catch (IOException e) {
                            e.printStackTrace();
                        }
                    } catch (Exception e) {
                        System.out.println("Error :" + e);
                    }

                } else {
                    videoLayout.setVisibility(View.GONE);
                }
            }
            catch (Exception e){

            }


        }

Hope this works.

Thanks @Lutaaya , its a nice simple logic , i have been stuck , thanks dude :) — huzaifah stack, Nov 28 '16 at 09:35

Loading Videos and Images on a RecyclerView once

2 Answers2