Android CardView Drop shadow gets clipped

Question

I am trying to show drop shadow on CardView. The shadow cannot be shown correctly if I put the CardView into a container (like LinearLayout).

My code:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:background="#FFFFF8"
    android:clipToPadding="false"
    tools:context=".MainActivity">

    <androidx.cardview.widget.CardView
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:translationZ="16dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        />

    <LinearLayout
        android:id="@+id/card1"
        android:layout_width="match_parent"
        android:layout_height="330dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:background="#FFFFF8"
        android:clipToPadding="false"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.cardview.widget.CardView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:translationZ="16dp"
            />
    </LinearLayout>
    
</androidx.constraintlayout.widget.ConstraintLayout>

It looks like:

I have two CardViews, I put the one below into a LinearLayout, as you can see, it has no shadow at top and left. But the upper one looks well.

Is there any way to fix for the scenario when CardView in a LinearLayout?

P.S.:

I don't want to introduce either extra margins on the CardView or extra paddings to the container LinearLayout
I've tried adding android:clipToPadding="false" to the container LinearLayout, but it doesn't help.
I've read this Elevation shadow is clipped, and tried both android:clipToPadding="false" && android:clipChildren="false", it doesn't work.

More context about why I don't want to have extra margins or paddings, my app is data-driven, and same to the drop shadows on CardViews, CardViews can be laid out vertically or horizontally one by one, with or with no drop shadows on them, if I have to take extra margins into account, for displaying the CardViews with shadow, then the logic would be too complex.

Assume such a scenario, say one shadowed CardView, another one shadowed to the right; but one not shadowed to the bottom etc. I have to set margin left to the 1st but no to the right because the 2nd (at right) also has shadow, and for the 2nd one, I have right margin for shadow; same logic to the one below, but logic gets complex here, that why I am asking for a solution here, if the drop shadow can be visible without depending on the margins/paddings, that'd be wonderful for me.

EDIT: Closed because: https://stackoverflow.com/a/57741227/853191, this comment helped me out.

Thanks!

@OhhhThatVarun Thanks for your answer! It helps a little but still doesn't look good. See https://raw.githubusercontent.com/chinalwb/myres/master/shadow.jpeg — LiuWenbin_NO., Apr 21 '21 at 09:43
@OhhhThatVarun Thank you sir for the idea! But I don't want to introduce extra logic here, because in my project there can be multiple such `cardview` s, horizontally or vertically aligned one by one, layout at runtime, data driven, I want their edges can be aligned, ie.: first cardview's right matches closely the right of the 2nd one, so the shadow will look like on them both instead of on each of them. Any other idea? Thanks again! — LiuWenbin_NO., Apr 21 '21 at 09:48
If you change `layout_marginLeft` and `layout_marginRight` to `paddingLeft` and `paddingRight` on the `LinearLayout` parent, respectively, you'll fix the horizontal clipping. The only way to remove that top clipping of the shadow is to introduce `paddingTop` to the shadowed-view's parent (at least equals to the size of the shadow from the top edge) — Cruceo, Apr 21 '21 at 14:35
@Cruceo Thank you for the comment! This is exactly the same with what I am experiencing but not the truth I expect.. I wish whether there are some trick here to allow the children (CardView) being drawn beyond its parent. — LiuWenbin_NO., Apr 22 '21 at 03:05
@shb No sir, it doesn't help me. I edited my post above for including more context for why that doesn't hep me. — LiuWenbin_NO., Apr 22 '21 at 03:25

score 0 · Answer 1 · answered Apr 21 '21 at 11:00

To show drop shadow you should use android:translationX="16dp", android:translationY="16dp", android:translationZ="16dp" like below.

<LinearLayout
    android:id="@+id/card1"
    android:layout_width="match_parent"
    android:layout_height="330dp"
    android:layout_marginLeft="16dp"
    android:layout_marginRight="16dp"
    android:background="#FFFFF8"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <androidx.cardview.widget.CardView
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:translationX="16dp"
        android:translationY="16dp"
        android:translationZ="16dp" />
</LinearLayout>

Output: Output Image click here!

Thanks for your answer sir! However translation on X and Y will change the CardView's position, which is I don't want to have. I.e.: in this pic: https://raw.githubusercontent.com/chinalwb/myres/master/Screenshot_1619009390.png I'd expect the left edge matches the yellow area and the drop shadow beyond the yellow area. Any other idea? — LiuWenbin_NO., Apr 21 '21 at 12:52

Android CardView Drop shadow gets clipped

1 Answers1