Adding depth

Android sdk 5.0 - material, has a new property called elevation for views. Elevation gives z value for views. So views with higher elevation will cast a shadow.

Elevation can be set using xml
    android:elevation ="somevalue"

Or using code
    viewname.setElevation(5);


Let us look at how a textview uses elevation property.

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#a3c6fa"
        android:elevation="5dp"
        android:text="Hello World!"/>

We are setting elevation of the textview to 5dp. We are setting light blue background color for textview.

Now our hello world textview looks like this.

Pretty simple. Isn't it?


Not quite so. Because elevation property needs sdk 21 or higher. You can not tell user to buy a new phone, just so that views will have a shadow. Can you?





The solution for older phones is layer-list. A layer-list drawable places different drawables on top of each other with given offset.

So let us write our layer-list .
shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item >
        <shape>
            <solid android:color="#a3c6fa"/>

        </shape>
    </item>
    <item  android:top="0dp" android:right="2dp" android:bottom="2dp" android:left="0dp">
        <shape>
            <solid android:color="#8fd1f5"
              />

        </shape>
    </item>

</layer-list>

Each <item> in this is one layer drawable. We have two layers here. First layer is grey color rectangle. Next layer is light blue rectangle with offset of 2dp at right and bottom.


Next let us add this as background to our textview.

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shadow"
     
        android:text="Hello World!"/>

After adding this code to the app, here is how our hello world looks like 

Who needs to spend hours on GIMP, when we know our xml?