CardView in Grid not displaying shadow on all sides

1.7k Views Asked by At

I have recently dropped the idea of adding shadow to GridView items and implemented CardViews.

The issue I am facing is the following: the CardView items display no shadow at the borders of the GridView as shown in the picture below:

enter image description here

The CardView Preview in Android Studio shows the layout with borders on all sides, shown as in this picture.

How can I add shadow to the sides of the GridView as well? Why is there no shadow coming from the Cardview items?

I tried reducing/increasing the size of GridView columns, I tried adding margin and padding to the GridView. I tried adding larger margin to the Cardview. None of them worked.

This is the code for the GridView:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<GridView
    android:id="@+id/CatalogGridList"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:horizontalSpacing="8dp"
    android:numColumns="auto_fit"
    android:columnWidth="128dp"
    android:stretchMode="columnWidth"
    android:verticalSpacing="8dp"/>
</LinearLayout>

This is the gist for the CardView layout xml.

2

There are 2 best solutions below

1
On BEST ANSWER

The trick is to use the android:clipToPadding attribute together with horizontal padding. Add these attributes to your GridView tag:

    android:paddingLeft="8dp"
    android:paddingRight="8dp"
    android:clipToPadding="false"

Without setting clipToPadding="false" you'll see the white bars you mentioned, but with it you'll see this:

enter image description here

1
On

As @Ameer said, you need to add some padding on the containing GridView so as to allow space for the shadows. Adjust the padding properties(left and right) as you see fit:

<GridView
    android:id="@+id/CatalogGridList"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:horizontalSpacing="8dp"
    android:numColumns="auto_fit"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:columnWidth="128dp"
    android:stretchMode="columnWidth"
    android:verticalSpacing="8dp"/>