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 wor

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

Answer 4

Something like this should do the trick:

<?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>

And then add the the layer-list as background in your LinearLayout.

<LinearLayout
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@drawable/background_with_shadow"/>

Also you can refer this post for reference.

EDIT: Add background_with_shadow.xml file to res/drawable.

For Android 5.0 and above refer this: Defining Shadows and Clipping Views

Answer 5

This code will match your requirement

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item><layer-list>
            <item android:right="5dp" android:top="5dp"><shape>
                    <corners android:radius="3dp" />

                    <solid android:color="#D6D6D6" />
            </shape></item>
        <item android:bottom="3dp" android:left="3dp"><shape>
                <gradient android:angle="270" android:endColor="#E2E2E2" android:startColor="#BABABA" />

                <stroke android:width="1dp" android:color="#BABABA" />

                <corners android:radius="4dp" />

                <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
            </shape></item>
    </layer-list></item>

</selector>

Answer 6

Maybe you can use CardView instead of LinearLayout,it provides som apis to implement the shadow