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.

you cannot do that in xml, you have to do it in java using a custom `Drawable` — pskink, Jan 05 '17 at 06:05
@pskink I think thats possible if she add the the layer-list as background in the LinearLayout.? — StackUseR, Jan 05 '17 at 06:08
@AshishSrivastava could you please point to an example i can refer to ?? — shivani, Jan 05 '17 at 06:10

Manohar · Answer 1 · 2019-03-15T07:16:48.550

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

thanks this helped me. is it possible to make the shade softer at the bottom? Like it would fade out? — WeSt, Jul 27 '17 at 08:24
at the top at `` change first 2 digits #02 to less ,it represents how much transperant the black colour should be — Manohar, Jul 27 '17 at 10:39
@Redman First of all thanks.This is brilliant.Though its serving the purpose.Can you please write a brief note how you came up with this or may be explaining the logic behind this code. — Nagarjuna Yelisetty, May 10 '18 at 10:53

Pushpendra · Answer 2 · 2017-01-05T06:24:23.567

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>

score 2 · Answer 3 · answered Aug 12 '17 at 20:42

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

score 0 · Answer 4 · answered Jan 05 '17 at 06:09

0

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

answered Jan 05 '17 at 06:09

Zellerpooh

31
2

I need to implement the shadow part just for 1 linear layout. I don't think cardview is feasible for me. – shivani Jan 05 '17 at 06:13

score 0 · Answer 5 · edited May 23 '17 at 12:33

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

score -1 · Answer 6 · answered Jan 05 '17 at 06:51

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>

How to add shadow to linear layout - android?

6 Answers6

Linked