How to add shadow to linear layout - android?

Question

In my android application I have to implement something like the image given below :

I have tried using shadow xmls for a linear layout but it doesn't seem to work out the way i want it to be. The code that I am using is :

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item >
    <shape
        android:shape="rectangle">
        <solid android:color="@android:color/darker_gray" />
        <corners android:radius="5dp"/>
    </shape>
</item>
<item android:right="5dp" android:left="5dp" android:bottom="15dp">
    <shape
        android:shape="rectangle">
        <solid android:color="@android:color/white"/>
        <corners android:radius="5dp"/>
    </shape>
</item>
</layer-list>

Please suggest how can I achieve this.

Answer 1

You can take an 9-patchImage with shadow as background or you can use the following xml as background of linearlayout for shadow

  <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Drop Shadow Stack -->
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#02000000" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#05000000" />
            <corners android:radius="7dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#10000000" />
            <corners android:radius="6dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#15000000" />
            <corners android:radius="5dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#20000000" />
            <corners android:radius="4dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#25000000" />
            <corners android:radius="3dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#30000000" />
            <corners android:radius="3dp" />
        </shape>
    </item>

    <!-- Background -->
    <item>
    <shape>
            <solid android:color="#ffffff" />
        <corners android:radius="3dp" />
    </shape>
   </item>
</layer-list>

remove padding from what ever side you don't need shadow

Note:

This is not mine , I copied it from somewhere long back and cannot find it back to give proper credit . If you know where its from then feel free to edit and keep credits

Answer 2

One simple way is put your layout in cardview.Provide elevations etc to make more realistic.

<android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        card_view:cardCornerRadius="4dp">

        <LinearLayout
            android:text="Hello Card"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        ...............

        </LinearLayout>

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

Answer 3

I might be late to this but in case someone else is needs it. You can use this tool http://inloop.github.io/shadow4android/ It allows you to make an image with shadow but treated not as a normal image but as a special one. You will get an image ending with .9.png instead of .png You should keep that .9 as it will direct Android Studio to treat as 9 patch

Then add this image to your drawables folder. Use it as a background for your Layout & you will get a nice natural shadow effect that until now I've never seen any drawable able to do the same