CardView in Grid not displaying shadow on all sides

Question

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:

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.

@AmeerHamza As I said in my post, adding padding increases white space on the GridView's margins. No shadow coming from the `CardView` — Catalin Ghita, Aug 29 '17 at 17:59
try to convert android:layout_width="match_parent" this wrap_contant then use padding — Hamza, Aug 29 '17 at 18:03

score 4 · Accepted Answer · answered Aug 29 '17 at 18:32

4

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:

answered Aug 29 '17 at 18:32

Ben P.

52,661
6
95
123

This is the answer i was looking for. Thank you! – Catalin Ghita Aug 29 '17 at 18:41

score 0 · Answer 2 · answered Aug 29 '17 at 18:04

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"/>

If i add padding as you suggest, and as I said in my post, I only get white spaces on the sides. [This is the proof](http://imgur.com/a/y29Ft) — Catalin Ghita, Aug 29 '17 at 18:09

CardView in Grid not displaying shadow on all sides

2 Answers2