unknown extra space source in staggered grid view

Question

this is my first time to use cards i got some extra space don't know where it comes from

this is my card view

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

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

    <ImageView
        android:id="@+id/product_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        card_view:srcCompat="@drawable/sample_1" />

    <TextView
        android:id="@+id/product_price"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignEnd="@+id/product_image"
        android:layout_alignParentTop="true"
        android:layout_alignRight="@+id/product_image"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:background="#ffffff"
        android:padding="10dp"
        android:text="$0.00"
        android:textColor="#000000" />


    <TextView
        android:id="@+id/product_description"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/product_image"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:background="#CCFFFFFF"
        android:text="This is the product description!"
        android:textColor="#000000" />
</RelativeLayout>

and here's my space decoration class

public class SpacesDecoration extends RecyclerView.ItemDecoration {
private final int mSpace;

public SpacesDecoration(int space) {
    this.mSpace = space;
}

@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {

    if (parent.getChildAdapterPosition(view) == 0)
        outRect.top = mSpace;
}}}

and that's the final view i get

can anybody tell me where's this extra space come from , thanks in advance

Answer 1

There are some problems in your CardView XML.

1. Update ImageView attribute android:layout_width="wrap_content" to android:layout_width="match_parent".

2. Use android:src="@drawable/sample_1" in your ImageView instead of card_view:srcCompat="@drawable/sample_1" and also use scaleType as per your needs.

3. Add attribute card_view:cardPreventCornerOverlap="false" to CardView and also use card_view:cardUseCompatPadding="false"

FYI, I have removed some unnecessary attributes from TextView's and added some to give proper alignment.

Try this:

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

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

        <ImageView
            android:id="@+id/product_image"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:scaleType="fitXY"
            android:src="@drawable/sample_1" />

        <TextView
            android:id="@+id/product_price"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_alignParentRight="true"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            android:background="#ffffff"
            android:padding="10dp"
            android:text="$0.00"
            android:textColor="#000000" />


        <TextView
            android:id="@+id/product_description"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/product_image"
            android:padding="8dp"
            android:background="#CCFFFFFF"
            android:text="This is the product description!"
            android:textColor="#000000" />
    </RelativeLayout>
</android.support.v7.widget.CardView>

OUTPUT:

Hope this will help~