Shadow on CardView within ConstraintLayout not showing

Question

I have a CardView within a ConstraintLayout.

This view is then inflated and added to a LinearLayout.

I would like the CardView to cast a shadow on the next CardView, but it seems to be clipped by the ConstraintLayout. How can I get the elevation shadow to show on the CardView without providing more padding or margins for it?

i.e. How can I cast the shadow on an adjacent item?

<LinearLayout>
    <ConstraintLayout>
        <CardView> <-- This view's shadow is cut
        ...
        </CardView>
    </ConstraintLayout>

    <ConstraintLayout>
        <CardView>
        ...
        </CardView>
    </ConstraintLayout>
<LinearLayout>

Answer 1

Try adding this comment inside your card view that's enough

card_view:cardUseCompatPadding="true"

Answer 2

How can I get the elevation shadow to show on the CardView without providing more padding or margins for it?

i.e. How can I cast the shadow on an adjacent item?

You can't, for both a practical reason and a conceptual one.

The practical reason comes down to how the Android framework draws CardView shadows. On older API levels, the card is inset within its own bounds and that extra space is used to draw the shadow. So even if you had two cards immediately next to each other, they'd still have "space" between them due to these insets. From the documentation:

Before Lollipop, CardView adds padding to its content and draws shadows to that area.

On Lollipop and higher, shadows are drawn within the parent's bounds, not within the CardView's bounds. Still, the parent will clip the shadow if there isn't enough space between the card's edges and the parent's edges to draw the whole shadow. In your example, each CardView is in a separate parent, so even if you put those parents immediately next to each other, each parent would still clip its card's shadow.

As for the conceptual reason, that's just not how shadows work (in nature). If you have two cards at the same elevation, even if they're right next to each other, the top card wouldn't cast a shadow on the bottom card.

Answer 3

Try to add

app:cardElevation="10dp"

In order to use app:cardElevation you have to add to your LinearLayout:

xmlns:app="http://schemas.android.com/apk/res-auto"

I tried this in a test project and the elevation should work this way. Below is my code:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="ro.helpproject.funcode.help.MainActivity">


    <android.support.constraint.ConstraintLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center">

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="50dp"
            app:cardElevation="10dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TEST TEST" />

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

    <android.support.constraint.ConstraintLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center">

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="50dp"
            app:cardElevation="10dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TEST TEST" />

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

</LinearLayout>

Answer 4

CardView needs padding around it for shadow to appear.

If app:cardUseCompatPadding="true" adds the shadow for you but you don't want the extra padding from 4 directions (LRTB), you need to add margin to the CardView yourself.

Enable Developer options -> Show layout boundaries and if you see that there is no empty space around your CardView. Then that's probably the reason shadow not appearing.