Multiple layers of shadows in android recyclerview elevation

Question

I have a recyclerview with an elevation of 8dp, transparent background and bounds as outlineProvider. clipToPadding is set to false on the parent relativelayout. I am facing a weird issue w.r.t the shadow cast by the recyclerview elevation. The shadow seems to cover up the edges of the recyclerview or there is an extra layer between the relativelayout and the child recyclerview (Attached an image reference). What is actually causing this effect? I have searched a lot but could not find any explanation.Any suggestions are welcome.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_grid_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false">

<android.support.v7.widget.RecyclerView
    android:id="@+id/grid_recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="110dp"
    android:layout_marginLeft="15dp"
    android:layout_marginTop="80dp"
    android:background="@color/transparent"
    android:outlineProvider="bounds"
    android:elevation="8dp"
    android:padding="0dp"
    android:scrollbars="none" />


<ImageView
    android:id="@+id/grid_main_filter_id"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:layout_alignBottom="@+id/grid_recycler_view"
    android:layout_alignStart="@+id/grid_recycler_view"
    android:layout_marginBottom="-18dp"
    android:layout_marginStart="67dp"
    android:elevation="10dp"
    android:background="@drawable/main_filter" />

<ImageView
    android:id="@+id/imageView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentStart="true"
    android:layout_marginBottom="36dp"
    android:layout_marginLeft="27dp"
    android:src="@drawable/hive" />

<ImageView
    android:id="@+id/imageView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="36dp"
    android:layout_marginLeft="24dp"
    android:layout_toEndOf="@+id/imageView2"
    android:src="@drawable/sway" />

<ImageView
    android:id="@+id/imageView4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="36dp"
    android:layout_marginLeft="24dp"
    android:layout_toEndOf="@+id/imageView3"
    android:src="@drawable/colony" />

<ImageView
    android:id="@+id/imageView5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="36dp"
    android:layout_marginLeft="24dp"
    android:layout_toEndOf="@+id/imageView4"
    android:src="@drawable/vault" />

<ImageView
    android:id="@+id/imageView6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true"
    android:layout_marginBottom="36dp"
    android:layout_marginRight="28dp"
    android:src="@drawable/camera" />

<ProgressBar
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/progressBar"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"
    android:visibility="gone"/>

recycler_view_child_item

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="0dp">
<ImageView
    android:id="@+id/thumbnail"
    android:layout_width="84dp"
    android:layout_height="150dp"
    android:layout_margin="0dp"
    android:padding="0dp" />
</LinearLayout>

score 0 · Answer 1 · answered Nov 03 '15 at 13:48

0

The first shadow is cast by the RecyclerView, the second is cast on top of the RecyclerView by the first ImageView child. Both shadows look fine. Maybe you can highlight the part of the image which is not correct according to you?

answered Nov 03 '15 at 13:48

Daniel Zolnai

16,487
7
59
71

Edited the question. The recyclerview child item does not have any elevation. – Neanderthal Nov 03 '15 at 19:17
Sorry but I still don't understand what is wrong with it. – Daniel Zolnai Nov 03 '15 at 20:00
The child item (recycler_view_child_item) of the recyclerview does not have any elevation. So it cannot cast any shadow on the recyclerview. So where is the second shadow coming from? Please let me know if I am still not clear with my question. – Neanderthal Nov 04 '15 at 06:26
It's probably coming from the image grid_main_filter_id – Daniel Zolnai Nov 04 '15 at 07:59
checked that too. That is not the reason. The transparent background seems to be causing the issue because when I change the background to different the shadow works perfectly. But I only need transparent background for recyclerview, so not sure what to do to fix it yet. Similar issue http://stackoverflow.com/questions/32286229/elevation-in-a-view-with-transparent-background – Neanderthal Nov 04 '15 at 11:24
Are you sure there's not anything behind the RecyclerView? If it's transparent, then you can see behind it, and there's something there which casts a shadow. – Daniel Zolnai Nov 04 '15 at 11:29
Yes, as you could notice from the layout xml in the question, there is nothing behind the recyclerview. – Neanderthal Nov 04 '15 at 11:44
Thanks a lot for the help, I'll try to figure it out. – Neanderthal Nov 04 '15 at 12:59

score 0 · Answer 2 · answered Jul 06 '18 at 18:12

The shadow is not on the top but behind the RecyclerView. This shadow is visible because you have transparent background of the RecyclerView. The shadow is rendered under the RecyclerView but not the whole surface is painted, just some area around the edges.

This might be an optimisation or a side effect, I'm not sure, but I've been observing this 'effect'. I guess this is normal and intended. If you make a solid backgound color, the not nice part will be covered.

Multiple layers of shadows in android recyclerview elevation

2 Answers2

Linked