Separating different Views in Android Studio using RecyclerView and CardView

Question

I am using FirebaseRecyclerViewAdapter with CardView in my application and want to load video on one card and images on another, but I dont know how to separate them. Everytime I add a videoView in CardView layout it gets added on the top of ImageView in same card and also gets repeated in all the RecyclerView. Its like same thing is coming again and again with number of posts I have. I want that VideoView should play video on different post and ImageView shows images on different, I have searched many options but did not find anything useful, please help.

I am using Android Studio

CardView xml file:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/CardView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardCornerRadius="10dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

       <com.google.android.youtube.player.YouTubePlayerView
            android:id="@+id/youtube"
            android:layout_width="match_parent"
            android:layout_height="200dp"/>

        <ImageView
            android:id="@+id/po_image"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop" />

        <TextView
            android:id="@+id/ti_cardView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:textSize="18sp"
            android:textStyle="bold"/>

        <TextView
            android:id="@+id/de_cardView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="10dp"
            android:paddingRight="10dp" />

        <TextView
            android:id="@+id/so_cardView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:textColor="@color/SoColor"/>

    </LinearLayout>

</android.support.v7.widget.CardView>

FirebaseRecyclerView Adapter class:

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.setTi(model.getTi());
                viewHolder.setde(model.getDe());
            }
        };
        mrecyclerView.setAdapter(firebaseRecyclerAdapter);


    }
    public static class postViewHolder extends RecyclerViewPager.ViewHolder{

        View mView;

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

        public void setTi(String ti){
            TextView post_ti = (TextView)mView.findViewById(R.id.ti_cardView);
            post_ti.setText(ti);
        }

        public void setde(String de){
            TextView post_de = (TextView)mView.findViewById(R.id.de_cardView);
            post_de.setText(de);
        }

You have put both imageview and videoview in the same layout. So every item in your listview contains both items. The best solution I can suggest you is to hide one of them pragmatically one of them at a time and show the other according to your data. — Zohaib Hassan, Aug 09 '17 at 18:26
@ZohaibHassan can it be achieved with FirebaseRecyclerAdapter? — Rohit B, Aug 10 '17 at 10:02
Yes it can be achieved with RecyclerView. But I am not sure about FirebaseRecyclerAdapter. — Zohaib Hassan, Aug 10 '17 at 18:54

score 0 · Answer 1 · answered Aug 09 '17 at 18:26

set visibility of both gone at first and then depending on its video url or image url. manipulate Visibility of each view

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/CardView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardCornerRadius="10dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

       <com.google.android.youtube.player.YouTubePlayerView
             android:visibility="gone"
            android:id="@+id/youtube"
            android:layout_width="match_parent"
            android:layout_height="200dp"/>

        <ImageView
           android:visibility="gone"
            android:id="@+id/po_image"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop" />

        <TextView
            android:id="@+id/ti_cardView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:textSize="18sp"
            android:textStyle="bold"/>

        <TextView
            android:id="@+id/de_cardView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="10dp"
            android:paddingRight="10dp" />

        <TextView
            android:id="@+id/so_cardView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:textColor="@color/SoColor"/>

    </LinearLayout>

</android.support.v7.widget.CardView>

When i set visibility to gone and add a video id for youtube my application shows an error of youtube player crash. — Rohit B, Aug 16 '17 at 18:16
There is no error log bro, but youtube player is also not visible if there is a video id in it and it shows in dialog the error of youtube has stopped. — Rohit B, Aug 17 '17 at 15:07

score 0 · Answer 2 · 2017-08-10T11:59:35.350

As you are using RecyclerView, don't put the VideoPlayer and the ImageView in the same xml layout, you can create two different layouts and use the getItemViewType() to choose the right layout to inflate.

The questions on how to use differente layouts on the same RecyclerView has been answered here

Sample code:

        image_item_layout.xml

    <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/CardView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        card_view:cardCornerRadius="10dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <ImageView
               android:visibility="gone"
                android:id="@+id/po_image"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:scaleType="centerCrop" />

           <...>

        </LinearLayout>

</android.support.v7.widget.CardView>

video_item_layout.xml

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/CardView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardCornerRadius="10dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

       <com.google.android.youtube.player.YouTubePlayerView
             android:visibility="gone"
            android:id="@+id/youtube"
            android:layout_width="match_parent"
            android:layout_height="

        <...>

    </LinearLayout>

</android.support.v7.widget.CardView>

On the ImageOrVideoAdapter.java you can use something like:

public class ImageOrVideoAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

    private List<ImageOrVideoItem> dataSource;

    private final int VIDEO_VIEW = 0;
    private final int IMAGE_VIEW = 1;

    class VideoItemViewHolder extends RecyclerView.ViewHolder {
        // Do your stuff with the video here

        public VideoItemViewHolder(View itemView) {
        }
    }

    class ImageItemViewHolder extends RecyclerView.ViewHolder {
        // Do your stuff with the image here
        public ImageItemViewHolder(View itemView) {
        }
    }

    @Override
    public int getItemViewType(int position) {
        return dataSource.get(position).isVideoItem() ? VIDEO_VIEW : IMAGE_VIEW;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        LayoutInflater inflater = LayoutInflater.from(parent.getContext());
        switch (viewType) {
            case VIDEO_VIEW:
                return new VideoItemViewHolder(inflater.inflate(R.layout.video_item_layout, parent, false));
            case IMAGE_VIEW:
                return new ImageItemViewHolder(inflater.inflate(R.layout.image_item_layout, parent, false));
        }
    }

    @Override
    public void onBindViewHolder(final RecyclerView.ViewHolder holder, final int position) {
        switch (holder.getItemViewType()) {
            case VIDEO_VIEW:
                VideoItemViewHolder viewHolder0 = (VideoItemViewHolder) holder;
                break;

            case IMAGE_VIEW:
                ImageItemViewHolder viewHolder2 = (ImageItemViewHolder) holder;
                break;
        }
    }
}

There are many posts all around StackOverflow about handling diferent layouts for the same RecyclerView, look around, you will find them.

EDIT

Take a look on this example using FireBase and see if it can adapted to fit your needs: Here

sir I am using Firebase as a database and using FirebaseRecyclerAdapter in it, can i use it with it. — Rohit B, Aug 10 '17 at 08:51
Yes you can. I edited the answer with a link about using it with FireBase — , Aug 10 '17 at 12:02
Sir i have already checked this post, but isnt there a firebase update in which we use itemViewType() and it functions the same? — Rohit B, Aug 10 '17 at 17:23

Separating different Views in Android Studio using RecyclerView and CardView

2 Answers2