ANDROID: Multiple Card Views inside recycler view

Question

Please see below image:

How can i insert multiple card View inside a Recycler View. or any other way to achieve this.
Using of Recycler view is must.

Answer 1

I think the proper way to achieve the goal as described in the image attached would be to use GridLayoutManager rather than using a RecyclerView.LayoutManager or LinearLayoutManager .

The LayoutManager we attach on the RecyclerView decides the number of columns. There are like 3 subclasses.

1. LinearLayoutManager
2. GridLayoutmanger
3. StaggeredGridLayoutmanger

In your activity where you initialize the RecyclerView.LayoutManager , change

RecyclerView.LayoutManager mLayoutManager = new LinearLayoutManger(this);

to

GridLayoutManager mLayoutManager = new GridLayoutManger(this, 2);

2 being the span count of the grid. Each item will be placed in a single span and thus you will have 2 columns in your recycler view.

Answer 2

Try this

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="8dp">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <android.support.v7.widget.CardView

            android:layout_width="match_parent"
            android:layout_weight="1"
            android:layout_height="300dp"
            android:orientation="vertical">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/a"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Huming Bird"/>
        </android.support.v7.widget.CardView>
        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:layout_height="wrap_content">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:src="@drawable/b"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Huming Bird"/>
        </android.support.v7.widget.CardView>
    </LinearLayout>

</LinearLayout>

Answer 3

Your xml can do like this:

<LinearLayout 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content"
            android:orientation="horizontal">
        <android.support.v7.widget.CardView
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content">
        </android.support.v7.widget.CardView>
        <android.support.v7.widget.CardView
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content">
        </android.support.v7.widget.CardView>
</LinearLayout>

Answer 4

To dynamically set up based on the number of columns required, you can set layout manager based on the number of column. This is very flexible. The same/similar code with corresponding layout can run on either tablet, or phone.

    // Set the adapter
    if (view instanceof RecyclerView) {
       Context context = view.getContext();
       RecyclerView recyclerView = (RecyclerView) view;
       if (mColumnCount <= 1) {
          recyclerView.setLayoutManager(new LinearLayoutManager(context));
       } else {
          recyclerView.setLayoutManager(new GridLayoutManager(context, mColumnCount));
       }
       ....
    }