Applying shadow with android elevation

Question

i'm trying to apply shadow on my layout using android:elevation, but it doesn't work for Android pre lolipop, is there any alternative of it. thanks in Advance.

Answer 1

Try this: Create a xml drawable in drawable folder named cardlayout.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <gradient android:angle="90"
                android:endColor="@color/background_gray" android:startColor="#ccc" />
            <corners android:radius="4dp" />
        </shape>
    </item>

    <item
        android:left="0dp"
        android:right="1.5dp"
        android:top="0dp"
        android:bottom="1.5dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white"/>
            <corners android:radius="4dp" />
        </shape>
    </item>
</layer-list>

Now add this drawable as background in any view that you want make elevated.

For better view you can make background color android:background="#d9d7d7" of the parent layouts

For quick example I am sharing 2 files of my project: This one is the activity with the background color of #d9d7d7

<?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"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/rel"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#d9d7d7"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/text"
            android:layout_width="65dp"
            android:layout_height="25dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:layout_marginBottom="5dp"
            android:background="@drawable/bg_green"
            android:gravity="center"
            android:padding="0dp"
            android:text=""
            android:textColor="#FFFFFF"
            android:textSize="14dp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:padding="10dp"
            android:text="Jobs has been applied"
            android:textSize="15dp"
            android:textStyle="bold" />
    </LinearLayout>

    <ListView
        android:id="@+id/listView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:divider="@android:color/transparent"
        android:dividerHeight="10.0sp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="13dp"
        android:layout_marginTop="10dp"
        android:layout_below="@+id/rel" >
    </ListView>

</RelativeLayout>

and this one the listRow xml with elevation.

<?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="wrap_content"
    android:orientation="vertical"
    android:padding="7dp"
    android:background="@drawable/cardlayout"
    android:paddingBottom="10dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@id/center"
        android:text=""
        android:layout_centerInParent="true"/>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginRight="-30dp"
        android:id="@+id/leftlayout1"
        android:layout_toLeftOf="@+id/center"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/sl"
            android:visibility="gone"
            android:textSize="10dp"
            android:text="1"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Bdjobs.com Ltd."
            android:textColor="#68AA47"
            android:textSize="13dp"
            android:layout_below="@+id/sl"
            android:textStyle="bold"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:id="@+id/companyname"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Mobile App Developer"
            android:layout_below="@+id/companyname"
            android:textColor="#1457A1"
            android:textSize="14dp"
            android:textStyle="bold"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="3dp"
            android:id="@+id/position"/>
        <TextView
            android:layout_width="120dp"
            android:layout_height="wrap_content"
            android:text="Applied on:11-14-2014"
            android:layout_below="@+id/position"
            android:textColor="#222222"
            android:textSize="12dp"
            android:padding="4dp"
            android:layout_marginLeft="7dp"
            android:layout_marginTop="0dp"
            android:id="@+id/applydate"/>
        <TextView
            android:layout_width="120dp"
            android:layout_height="wrap_content"
            android:text="Deadline:    11-14-2014"
            android:layout_below="@+id/applydate"
            android:textColor="#222222"
            android:textSize="12dp"
            android:padding="4dp"

            android:layout_marginLeft="7dp"
            android:layout_marginTop="0dp"
            android:id="@+id/deadlineApp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#FFFFFF"
            android:textSize="10dp"
            android:layout_toRightOf="@+id/companyname"
            android:visibility="invisible"
            android:padding="8dp"
            android:background="#536d7a"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:id="@+id/jobidApplied"/>



    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/rightlayout1"
        android:paddingRight="16dp"
        android:layout_marginLeft="30dp"
        android:layout_toRightOf ="@+id/center"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Expected Salary"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:textSize="12dp"
            android:textColor="#111111"
            android:id="@+id/exp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="100000/-"
            android:layout_below="@+id/exp"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="0dp"
            android:textSize="12dp"
            android:textColor="#999999"
            android:id="@+id/expectedsalary"/>
        <TextView
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:text="Viewed by Employer"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="20dp"
            android:textSize="11dp"
            android:textStyle="bold"
            android:gravity="center"
            android:layout_alignParentRight="true"
            android:padding="7dp"
            android:background="@drawable/border_delete"
            android:textColor="#ffffff"
            android:layout_below="@+id/expectedsalary"
            android:id="@+id/viewdresume"/>

    </RelativeLayout>



</RelativeLayout>