How can I design a gridview type of view inside a cardview and implement it in code?

Question

I have already made the recyclerView and I can't figure out how to design the cardview . As it has 4 custom items inside it .

How can I get the access to the card items?

In my cardview design layout where I have placed a gridview inside the cardview and i can't figure out how to access the gridview items with an ArrayList.

My cardview design layout

     <android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="match_parent"
xmlns:tools="http://schemas.android.com/tools"
android:background="@color/cardview_light_background"
android:layout_margin="@dimen/activity_horizontal_margin"
card_view:cardElevation="@dimen/elevation_height"
android:id="@+id/cvVideos">
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/presence_video_busy"
android:id="@+id/ivIconTitle"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="39dp"
        android:text="@string/app_name"
        android:textColor="@color/textColorSecondary"
        android:id="@+id/tvTitle" />
</LinearLayout>

<GridView
    android:id="@+id/grid_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:numColumns="auto_fit"
    android:columnWidth="120dp"
    android:horizontalSpacing="10dp"
    android:verticalSpacing="10dp"
    android:gravity="center"
    android:stretchMode="columnWidth"
    tools:listitem="@layout/video_grid_listitem"
    android:padding="@dimen/activity_horizontal_margin">
</GridView>
</android.support.v7.widget.CardView>

Please show the current XML layout and code that you have and what that looks like. — OneCricketeer, Feb 27 '17 at 05:13
And what makes you think this needs `CardView` at all? This really looks like a GridLayout of just regular Views. — OneCricketeer, Feb 27 '17 at 05:14
@Sushrita yes this possible using recyclerView as well easy to handle.for bottom view you can use bottomsheet — Saurabh Bhandari, Feb 27 '17 at 05:25
@SaurabhBhandari can you tell me how to get the customized cardview items of the view . — Sushrita, Feb 27 '17 at 05:27
inside card view use Linear layout. inside linear layout use first imageView then textView and then your button for watching vodeo etc etc.then bind your view with recyclerView adapter class. — Saurabh Bhandari, Feb 27 '17 at 05:31

score 0 · Answer 1 · answered Feb 27 '17 at 05:14

In the RecyclerView use xml like this:

  @Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.your_XML, parent, false);

    ViewHolder viewHolder = new ViewHolder(v);

    return viewHolder;
}

Now design your cardView Xml like this:

your_XML.xml:

 <?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView 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"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/content_find_service_providers"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardElevation="0dp"
    card_view:contentPadding="3dp"
    card_view:cardCornerRadius="3dp"
    card_view:cardMaxElevation="2dp"
    card_view:cardUseCompatPadding="true"
    >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
      >

    </RelativeLayout>

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

But i recommend use GridView intsead of cardView

score 0 · Answer 2 · answered Feb 27 '17 at 07:12

    [![You can user this:
    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/networkCard_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginBottom="@dimen/card_bottom_spacing"
        android:layout_marginLeft="@dimen/card_left_spacing"
        android:layout_marginRight="@dimen/card_right_spacing"
        android:layout_marginTop="@dimen/card_top_spacing"
        android:foregroundGravity="center"
        card_view:cardCornerRadius="@dimen/card_corner_radius"
        card_view:cardElevation="2dp"
        card_view:cardMaxElevation="0dp"
        card_view:cardPreventCornerOverlap="false"
        card_view:cardUseCompatPadding="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/mainLL"
            android:background="@drawable/oval_white_background_5"
            android:orientation="vertical">
            <LinearLayout
                android:id="@+id/productsLL"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/productCountTV"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="5dp"
                    android:textColor="@color/black"
                    android:textSize="@dimen/header_font_size_small"
                    android:textStyle="bold"
                    android:visibility="gone" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="5dp"
                    android:orientation="horizontal"
                    android:weightSum="2">

                    <LinearLayout
                        android:id="@+id/gridProductLL1"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_marginBottom="5dp"
                        android:layout_marginLeft="5dp"
                        android:layout_marginRight="5dp"
                        android:layout_weight="1"
                        android:background="@drawable/grey_border_without_padding"
                        android:orientation="vertical">

                        <ImageView
                            android:id="@+id/productIV1"
                            android:layout_width="match_parent"
                            android:layout_height="@dimen/image_gallery_height"
                            android:layout_margin="1dp"
                            android:adjustViewBounds="true"
                            android:scaleType="centerCrop"
                            android:src="@drawable/crop_tile2" />

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

                            <TextView
                                android:id="@+id/product1TitleTV"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:textColor="@color/greyDark600"
                                android:text="MyTitle"
                                android:textSize="@dimen/font_size_small"
                                android:textStyle="bold"
                                android:visibility="visible" />
                        </LinearLayout>
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/gridProductLL2"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_marginBottom="5dp"
                        android:layout_marginLeft="5dp"
                        android:layout_marginRight="5dp"
                        android:layout_weight="1"
                        android:background="@drawable/grey_border_without_padding"
                        android:orientation="vertical">

                        <ImageView
                            android:id="@+id/productIV2"
                            android:layout_width="match_parent"
                            android:layout_height="@dimen/image_gallery_height"
                            android:layout_margin="1dp"
                            android:adjustViewBounds="true"
                            android:scaleType="centerCrop"
                            android:src="@drawable/crop_tile2" />

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

                            <TextView
                                android:id="@+id/product2TitleTV"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:textColor="@color/greyDark600"
                                android:textSize="@dimen/font_size_small"
                                android:textStyle="bold"
                                android:text="MyTitle"
                                android:visibility="visible" />
                        </LinearLayout>
                    </LinearLayout>
                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="5dp"
                    android:orientation="horizontal"
                    android:weightSum="2">

                    <LinearLayout
                        android:id="@+id/gridProductLL3"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_margin="5dp"
                        android:layout_weight="1"
                        android:background="@drawable/grey_border_without_padding"
                        android:orientation="vertical">

                        <ImageView
                            android:id="@+id/productIV3"
                            android:layout_width="match_parent"
                            android:layout_height="@dimen/image_gallery_height"
                            android:layout_margin="1dp"
                            android:adjustViewBounds="true"
                            android:scaleType="centerCrop"
                            android:src="@drawable/crop_tile2" />

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

                            <TextView
                                android:id="@+id/product3TitleTV"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:textColor="@color/greyDark600"
                                android:textSize="@dimen/font_size_small"
                                android:text="MyTitle"
                                android:textStyle="bold"
                                android:visibility="visible" />

                            <RelativeLayout
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content">

                                <TextView
                                    android:id="@+id/productPrice3TV"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_alignParentLeft="true"
                                    android:text="Rs. 200"
                                    android:gravity="center"
                                    android:textColor="@color/colorRed"
                                    android:textSize="@dimen/font_size_small"
                                    android:textStyle="bold" />

                                <TextView
                                    android:id="@+id/product3buysNowTV"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_alignParentRight="true"
                                    android:background="@drawable/rounded_corner_blue_border_botton"
                                    android:gravity="center"
                                    android:paddingBottom="2dp"
                                    android:paddingLeft="5dp"
                                    android:paddingRight="5dp"
                                    android:paddingTop="2dp"
                                    android:textColor="@color/color_facebook"
                                    android:textSize="@dimen/font_size_small"
                                    android:visibility="gone" />
                            </RelativeLayout>
                        </LinearLayout>
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/gridProductLL4"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_margin="5dp"
                        android:layout_weight="1"
                        android:background="@drawable/grey_border_without_padding"
                        android:orientation="vertical">

                        <RelativeLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="1dp"
                            android:layout_weight="0.34"
                            android:adjustViewBounds="true">

                            <ImageView
                                android:id="@+id/productIV4"
                                android:layout_width="match_parent"
                                android:layout_height="@dimen/image_gallery_height"
                                android:layout_margin="1dp"
                                android:adjustViewBounds="true"
                                android:scaleType="centerCrop"
                                android:src="@drawable/crop_tile2" />

                            <TextView
                                android:id="@+id/t5LTVImageCount"
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:background="@color/gallery_image_count_background_color"
                                android:gravity="center"
                                android:textColor="@color/white"
                                android:textSize="20sp"
                                android:visibility="gone" />
                        </RelativeLayout>


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

                            <TextView
                                android:id="@+id/product4TitleTV"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:textColor="@color/greyDark600"
                                android:text="MyTitle"
                                android:textSize="@dimen/font_size_small"
                                android:textStyle="bold"
                                android:visibility="visible" />

                            <RelativeLayout
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content">

                                <TextView
                                    android:id="@+id/productPrice4TV"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_alignParentLeft="true"
                                    android:gravity="center"
                                    android:text="Rs. 200"
                                    android:textColor="@color/colorRed"
                                    android:textSize="@dimen/font_size_small"
                                    android:textStyle="bold" />

                                <TextView
                                    android:id="@+id/product4buysNowTV"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_alignParentRight="true"
                                    android:background="@drawable/rounded_corner_blue_border_botton"
                                    android:gravity="center"
                                    android:paddingBottom="2dp"
                                    android:paddingLeft="5dp"
                                    android:paddingRight="5dp"
                                    android:paddingTop="2dp"
                                    android:textColor="@color/color_facebook"
                                    android:textSize="@dimen/font_size_small"
                                    android:visibility="gone" />
                            </RelativeLayout>
                        </LinearLayout>
                    </LinearLayout>
                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="5dp"
                    android:orientation="horizontal"
                    android:visibility="visible"
                    android:weightSum="2">

                    <LinearLayout
                        android:id="@+id/gridProductLL5"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_margin="5dp"
                        android:layout_weight="1"
                        android:background="@drawable/grey_border_without_padding"
                        android:orientation="vertical"
                        android:visibility="gone">

                        <ImageView
                            android:id="@+id/productIV5"
                            android:layout_width="match_parent"
                            android:layout_height="@dimen/image_gallery_height"
                            android:layout_margin="1dp"
                            android:adjustViewBounds="true"
                            android:scaleType="centerCrop"
                            android:src="@drawable/crop_tile2" />

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

                            <TextView
                                android:id="@+id/product5TitleTV"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="Product Name"
                                android:textColor="@color/greyDark600"
                                android:textSize="@dimen/font_size_small"
                                android:textStyle="bold"
                                android:visibility="gone" />

                            <RelativeLayout
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content">

                                <TextView
                                    android:id="@+id/productPrice5TV"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_alignParentLeft="true"
                                    android:gravity="center"
                                    android:textColor="@color/colorRed"
                                    android:textSize="@dimen/font_size_small"
                                    android:textStyle="bold" />

                                <TextView
                                    android:id="@+id/product5buysNowTV"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_alignParentRight="true"
                                    android:background="@drawable/rounded_corner_blue_border_botton"
                                    android:gravity="center"
                                    android:paddingBottom="2dp"
                                    android:paddingLeft="5dp"
                                    android:paddingRight="5dp"
                                    android:paddingTop="2dp"
                                    android:textColor="@color/color_facebook"
                                    android:textSize="@dimen/font_size_small"
                                    android:visibility="gone" />
                            </RelativeLayout>
                        </LinearLayout>
                    </LinearLayout>

                    <LinearLayout
                        android:id="@+id/gridProductLL6"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_margin="5dp"
                        android:layout_weight="1"
                        android:background="@drawable/grey_border_without_padding"
                        android:orientation="vertical"
                        android:visibility="gone">

                        <RelativeLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="1dp"
                            android:layout_weight="0.34"
                            android:adjustViewBounds="true">

                            <ImageView
                                android:id="@+id/productIV6"
                                android:layout_width="match_parent"
                                android:layout_height="@dimen/image_gallery_height"
                                android:layout_margin="1dp"
                                android:adjustViewBounds="true"
                                android:scaleType="centerCrop"
                                android:src="@drawable/crop_tile2" />

                            <TextView
                                android:id="@+id/t6LTVImageCount"
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:background="@color/gallery_image_count_background_color"
                                android:gravity="center"
                                android:textColor="@color/white"
                                android:textSize="20sp"
                                android:visibility="gone" />
                        </RelativeLayout>


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

                            <TextView
                                android:id="@+id/product6TitleTV"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="Product Name"
                                android:textColor="@color/greyDark600"
                                android:textSize="@dimen/font_size_small"
                                android:textStyle="bold"
                                android:visibility="gone" />

                            <RelativeLayout
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content">

                                <TextView
                                    android:id="@+id/productPrice6TV"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_alignParentLeft="true"
                                    android:gravity="center"
                                    android:textColor="@color/colorRed"
                                    android:textSize="@dimen/font_size_small"
                                    android:textStyle="bold" />

                                <TextView
                                    android:id="@+id/product6buysNowTV"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_alignParentRight="true"
                                    android:background="@drawable/rounded_corner_blue_border_botton"
                                    android:gravity="center"
                                    android:paddingBottom="2dp"
                                    android:paddingLeft="5dp"
                                    android:paddingRight="5dp"
                                    android:paddingTop="2dp"
                                    android:textColor="@color/color_facebook"
                                    android:textSize="@dimen/font_size_small"
                                    android:visibility="gone" />
                            </RelativeLayout>
                        </LinearLayout>
                    </LinearLayout>
                </LinearLayout>
            </LinearLayout>

            <TextView
                android:id="@+id/seeAllTV"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:padding="2dp"
                android:text="See all Users"
                android:textColor="@color/lite_blue"
                android:textSize="@dimen/header_font_size_small"
                android:visibility="gone" />
        </LinearLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>][1]][1]

I have tried it this way but I can't get to manage it properly. — Sushrita, Feb 27 '17 at 07:21
according you screen short you need like this only rt? where you are facing problem exactly? — Sanat Chandravanshi, Feb 27 '17 at 07:25
How can I create a holder for this cardview? It's my main concern — Sushrita, Feb 27 '17 at 07:52
You can have a List, 1 field of your model should be a list like ArrayList modelList; and while rendering use as mainList.get(position).get(1).gridviewModel. — Sanat Chandravanshi, Feb 27 '17 at 08:46

How can I design a gridview type of view inside a cardview and implement it in code?

2 Answers2