Android. Weird triangle shadow appearing at the bottom of recycle view list

Question

As you can see on an attached image I'm having a sort of triangle shadow at the right side of my cards down in the list.

I have elevation set to 0 for all three:

app:cardElevation="0dp"
card_view:cardElevation="0dp"
android:elevation="0dp"

This happens to all my lists. What am I missing?

Answer 1

You didn't post complete layout source, but I had the same issue and I assume the cause was the same. I had a similar list of items, each row being a custom view which extends LinearLayout and inflates some custom layout (let's call it row_item.xml). The list layout looked something like this:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <com.example.android.RowItem
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <com.example.android.RowItem
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

The RowItem layout (row_item.xml) looked something like this:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:orientation="vertical"
          android:elevation="10dp"
          android:outlineProvider="bounds">

   ...

</LinearLayout>

The problem is RowItem being LinearLayout alone and inflating row_item.xml with the following code:

LayoutInflater.from(context).inflate(R.layout.row_item, this, true);

This actually wrapped the LinearLayout with elevation by ANOTHER LinearLayout, creating a layout similar to this:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android">

    <LinearLayout 
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:orientation="vertical"
         android:elevation="10dp"
         android:outlineProvider="bounds">

      ...

    </LinearLayout>

</LinearLayout>

Setting elevation on the LinearLayout wrapped by another LinearLayout caused these weird shadows. The solution is setting the elevation on the outside LinearLayout. Even better solution is getting rid of the double layout by replacing <LinearLayout> by <merge> in row_item.xml and setting elevation programmatically inside the custom view's code.

In case you are not using a custom view but are having this problem, you are probably not setting elevation on the outer most container of your item.