CardView above another CardView with elevation overlapping

Question

Is it possible to archive below layout using cardview elevation.

As I have tried few solution to archive the same but no success as of now.

1> Solution 1 :

<RelativeLayout>
<AccountCardView>
<ChangePasswordCardView>
<EmailCardView>

as relative layout last most component comes on top of all but that did not work.

2> Solution 2 :

I tried given negative margin to below cardview it show some what similar to the above screen only in android studio layout editor, when I have tried installing it on real device or emulator layout seem to look like below one.

Answer 1

As you have asked only about CardView, there is a hack and this is NOT the right way to do it. If you could choose to consider other ways to achieve this layout, I would recommend to use having extra Views with drop shadow below each of the segment (CardView in your question).

Please try as below to achieve the same with CardView

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto">


<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:id="@+id/card_1"
    android:layout_height="100dp"
    card_view:cardElevation="15dp"
    card_view:cardPreventCornerOverlap="false"/>

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:id="@+id/card_2"
    android:layout_height="100dp"
    card_view:cardElevation="14dp"
    android:layout_below="@+id/card_1"
    card_view:cardPreventCornerOverlap="false"/>

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:id="@+id/card_3"
    android:layout_height="100dp"
    card_view:cardElevation="13dp"
    android:layout_below="@+id/card_2"
    card_view:cardPreventCornerOverlap="false"/>

This will produce the result attached below

The problem with this solution is if you notice carefully, each of the cards have lesser elevation than the previous one.