Multiple layers of shadows in android recyclerview

2019-08-12 07:22发布

问题:

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>

回答1:

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?



回答2:

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.