Content overlapping in grid view android

Question

I am creating an android application in which I want to display data in grid view. My webservice is working fine and successfully data showing in grid view. Now what I want that when data populating in second row then it is overlapping on first row. How can I resolve this below issue ?

GridView in my activity.

<GridView
        android:id="@+id/list"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:divider="@color/list_divider"
        android:numColumns="3"
        android:layout_marginTop="12dp"
        android:scrollbars="none"
        android:layout_marginBottom="12dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:verticalSpacing="15dp"
        android:horizontalSpacing="15dp"
        android:dividerHeight="1dp"/>

Custom adapter layout code below.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:background="@drawable/layout_bg"
    android:gravity="center"
    android:orientation="vertical"
    android:paddingBottom="10dp">

    <androidx.cardview.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardCornerRadius="10dp"
        app:cardElevation="0dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="150dp">

            <!-- Thumbnail Image -->
            <com.android.volley.toolbox.NetworkImageView
                android:id="@+id/thumbnail"
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:layout_alignParentLeft="true"
                android:foregroundGravity="center"
                android:scaleType="fitXY"
                android:src="@drawable/demo_image" />

            <ImageView android:id="@+id/imgYoutube"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/youtube"
                android:visibility="gone"
                android:layout_centerInParent="true"></ImageView>

        </RelativeLayout>

    </androidx.cardview.widget.CardView>

    <!-- Movie Title -->
    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/thumbnail"
        android:layout_marginTop="5dp"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:text="Moin Khan"
        android:textColor="#000000"
        android:textSize="16sp"
        android:textStyle="bold" />

    <!-- Rating -->
    <TextView
        android:id="@+id/description"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:paddingBottom="5dp"
        android:text="Complete course"
        android:textSize="12sp" />

</LinearLayout>

Answer 1

I think the you need to use RecyclerView instead of GridView for your purpose as you have items with unequal height and that usually caused issues with gridview. Use these tags for your case,

recyclerView.setHasFixedSize(false);
recyclerView.setLayoutManager(new GridLayoutManager(this, 3));