Remove CardView shadow from one side

Question

According to my app ui requirement it's need plain side on top of cardview so, it need to remove shadow from upper side and touch to another view.

I tried

card_view:cardElevation="0dp"

but it removed shadow from all side, so it's not useful to me.

I tried by negative margin (-5dp) applied to CardView and image view one by one but all time CardView is come over the image not under the image so,it doesn't worked for me.

App ui requirement is like this

Can any one give suggestions of do help to solve this?

score 3 · Answer 1 · edited Jul 24 '20 at 12:50

I come out from this problem by creating the custom background look like card view but without top shadow.

Create one XML file in drawable folder and put this code inside and set it in background.

android:background="@drawable/custom_cardview_no_top_shadow"

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item>
    <shape>
        <padding android:top="0dp" android:right="10dp" android:bottom="5dp" android:left="10dp" />
        <solid android:color="@color/transparent" />
    </shape>
</item>

<item>
    <shape>
        <padding android:top="0dp" android:right="0dp" android:bottom="1dp" android:left="0dp" />
        <solid android:color="@color/card_shadow_1" />
        <corners android:radius="0dp" />
    </shape>
</item>
<item>
    <shape>
        <padding android:top="0dp" android:right="0dp" android:bottom="1dp" android:left="0dp" />
        <solid android:color="@color/card_shadow_2" />
        <corners android:radius="0dp" />
    </shape>
</item>
<!-- Background -->
<item>
    <shape >
        <solid android:color="@color/card_background" />
        <corners android:radius="0dp" />
    </shape>
</item>
</layer-list>

Here is the color for the Card view

<!-- card colors -->
<color name="card_background">#ffffff</color>
<color name="card_shadow_1">#d4d4d4</color>
<color name="card_shadow_2">#dddddd</color>
<color name="transparent">#00000000</color>

score 2 · Answer 2 · answered Aug 25 '17 at 09:38

You can achieve this kind of effect by creating another view that is higher than cardview in z axis. After that you need to set its outlineProvider property to none to disable shadow effect and place it to the desired edge of CardView.

<RelativeLayout>
   <CardView/>
   <View
       ..
       android:outlineProvider="none"
       android:translationZ="12dp"
       android:background="@color/cardViewBackgroundColor>
   </View>
</RelativeLayout>

Remove CardView shadow from one side

2 Answers2