I encountered a strange error while setting elevations to items in recycler-view. I have two item types in adapter, first is a kind of dashboard with complex layout with three cardviews. Second one is classic item for data list where each item has cardview as root. each cardview in both layouts is defined as follows
First Item Type :
<LinearLayout
android:id="@+id/root"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
app:cardCornerRadius="2dp"
app:cardElevation="3dp"
>
....
</android.support.v7.widget.CardView>
....
</LinearLayout>
Second Item Type:
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
app:cardCornerRadius="2dp"
app:cardElevation="3dp"
>
....
</android.support.v7.widget.CardView>
As you can see both cardviews have same elevation set but when i deploy this layout they have different shadows, any idea what could be the reason for this ?
I cut a part of screen and placed the cuts next to each other so you can see the problem ...
EDIT
Layout for first item is pretty complex, but all three cardviews in this item type have same shadow (the one on the left in image above). Root cardview of second item type has the shadow that's on the right in the image.
default_elevation = 3dp
default_corner_radius = 2dp
margins are 16dp, 8dp, 4dp etc ...
First item type :
<layout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:id="@+id/root"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/margin_and_half"
android:layout_marginLeft="@dimen/default_padding"/>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/margin_quarter"
android:layout_marginLeft="@dimen/margin_half"
android:layout_marginRight="@dimen/margin_half"
android:layout_marginBottom="@dimen/margin_half"
app:cardCornerRadius="@dimen/default_corner_radius"
app:cardElevation="@dimen/default_elevation"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="@dimen/default_padding"
android:paddingRight="@dimen/default_padding"
android:paddingTop="@dimen/margin_and_half"
android:paddingBottom="@dimen/margin_and_half"
android:gravity="center_vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="bottom"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/black"
android:textSize="48sp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/black"
android:textSize="24sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/default_padding"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="@dimen/margin_half"
android:textColor="@color/green"
/>
<ImageView
android:layout_width="@dimen/default_size"
android:layout_height="@dimen/default_size"/>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="@dimen/default_padding"
android:layout_marginLeft="@dimen/default_padding"
android:layout_marginBottom="@dimen/margin_quarter"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_weight="0.5"
android:layout_height="wrap_content"/>
<TextView
android:layout_width="0dp"
android:layout_weight="0.5"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/margin_quarter"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="@dimen/margin_half"
android:paddingRight="@dimen/margin_half"
android:paddingBottom="@dimen/margin_default"
android:clipChildren="false"
android:clipToPadding="false"
android:orientation="horizontal">
<android.support.v7.widget.CardView
android:layout_width="0dp"
android:layout_weight="0.5"
android:layout_height="wrap_content"
android:layout_marginRight="@dimen/margin_quarter"
app:cardCornerRadius="@dimen/default_corner_radius"
app:cardElevation="@dimen/default_elevation">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="@dimen/margin_double"
android:paddingBottom="@dimen/margin_double"
android:layout_centerInParent="true"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="0dp"
android:layout_weight="0.5"
android:layout_height="wrap_content"
app:cardCornerRadius="@dimen/default_corner_radius"
app:cardElevation="@dimen/default_elevation">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="@dimen/margin_double"
android:paddingBottom="@dimen/margin_double"
android:layout_centerInParent="true"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/margin_half"
android:layout_marginLeft="@dimen/default_padding"
android:layout_marginBottom="@dimen/margin_quarter"/>
</LinearLayout>
</layout>
Second item type :
<?xml version="1.0" encoding="utf-8"?>
<layout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.v7.widget.CardView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_marginLeft="@dimen/margin_half"
android:layout_marginRight="@dimen/margin_half"
android:layout_marginBottom="@dimen/margin_half"
app:cardCornerRadius="@dimen/default_corner_radius"
app:cardElevation="@dimen/default_elevation"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="@dimen/default_padding">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="@dimen/margin_quarter"
android:orientation="horizontal">
<TextView
android:id="@+id/textview1"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"/>
<TextView
android:id="@+id/textview2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAllCaps="true"/>
</LinearLayout>
<TextView
android:id="@+id/textview3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@color/black"
android:textAppearance="..(Too Long)"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</layout>
Had the same Problem, after some further investigation wanted to leave this here:
It seems to me, that the elevation is more focused on giving a feeling of depth than just "simply" casting a shadow. So, depending on where your view is located on the screen, the lighting is different and the shadow is casted differently, also the shadow is depending on the view's outline.
I recommend the following blog post in regard of this problem: https://blog.usejournal.com/playing-with-elevation-in-android-91af4f3be596
Also very helpful is the elevation-tester-app mentioned in the blog post: https://play.google.com/store/apps/details?id=me.seebrock3r.elevationtester&rdid=me.seebrock3r.elevationtester
But in conclusion I was not yet able to create an elevation based shadow which is consistent for every view regardless of on-screen-position :(