android - No shadow/elevation underneath second card if there are two card in the layout. Why?

Question

I have 2 cards in a single RelativeLayout.

The problem is that there is no elevation or shadow underneath the second card.

See the screenshot here: screenshot

Here's what I have done in the xml file:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.abc.xyz.abcActivity">

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

        <TextView
            android:id="@+id/cba_screen_text"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="@string/cba_screen_text"
            android:textColor="@android:color/white"
            android:textSize="@dimen/cba_screen_text"
            android:gravity="center_horizontal|center_vertical"
            android:layout_gravity="center_horizontal|center_vertical"/>

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/signup_screen_first_cardview_top_margin"
            app:contentPadding="10dp"
            app:cardBackgroundColor="@android:color/white">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal|center_vertical"
                android:orientation="vertical">

            <!--  N Label -->
            <android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="@dimen/abc_screen_name_label_topmargin">
                <EditText android:id="@+id/input_n"
                          android:layout_width="match_parent"
                          android:layout_height="wrap_content"
                          android:inputType="textCapWords"
                          android:textColor="@color/colorPrimary"
                          android:hint="N" />
            </android.support.design.widget.TextInputLayout>

            <!-- E Label -->
            <android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/abc_screen_name_label_topmargin"
                android:layout_marginBottom="@dimen/abc_screen_name_label_topmargin">
                <EditText android:id="@+id/input_e"
                          android:layout_width="match_parent"
                          android:layout_height="wrap_content"
                          android:inputType="textCapWords"
                          android:textColor="@color/colorPrimary"
                          android:hint="E" />
            </android.support.design.widget.TextInputLayout>

            <!-- P Label -->
            <android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/abc_screen_name_label_topmargin"
                android:layout_marginBottom="@dimen/abc_screen_name_label_topmargin">
                <EditText android:id="@+id/input_p"
                          android:layout_width="match_parent"
                          android:layout_height="wrap_content"
                          android:inputType="textCapWords"
                          android:textColor="@color/colorPrimary"
                          android:hint="P"/>
            </android.support.design.widget.TextInputLayout>

            <!-- S Button -->
            <android.support.v7.widget.AppCompatButton
                android:id="@+id/btn_s"
                android:layout_width="@dimen/s_btn_width"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/c_btn_topmargin"
                android:layout_gravity="center_horizontal"
                android:padding="12dp"
                android:text="C"
                android:textSize="@dimen/s_btn_text_size"/>

                <TextView android:id="@+id/l"
                          android:layout_width="fill_parent"
                          android:layout_height="wrap_content"
                          android:layout_marginTop="@dimen/a_topmargin"
                          android:text="A"
                          android:gravity="center"
                          android:textSize="16sp"/>

            </LinearLayout>

        </android.support.v7.widget.CardView>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="5dp"
            android:layout_gravity="center_horizontal|center_vertical"
            android:text="OR"
            android:textStyle="bold"
            android:textSize="20sp"
            android:textColor="@android:color/white"/>

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentPadding="10dp"
            app:cardElevation="2dp"
            app:cardBackgroundColor="@android:color/white">

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

                <com.google.android.gms.common.SignInButton
                    android:id="@+id/google_login_button"
                    android:layout_width="@dimen/sign_in_btn_width"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal" />

                <com.facebook.login.widget.LoginButton
                    android:id="@+id/facebook_login_button"
                    android:layout_width="@dimen/sign_in_btn_width"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="5dp"
                    android:layout_gravity="center_horizontal" />

            </LinearLayout>

        </android.support.v7.widget.CardView>

    </LinearLayout>

</RelativeLayout>

Please let me know why is this happening and how can I have the shadow/elevation underneath the second card too?

Answer 1

Your LinearLayout is wrapping its height, cutting off the shadow of the card at the bottom.

Either put some padding on the bottom of the LinearLayout or set it to match_parent on its height.

PS that outer RelativeLayout is useless -- get rid of it and put all the padding and background on the inner LinearLayout